How to add Bootstrap to my Symfony 4.1 project? - symfony

I tried to find a similar case to mine but didn't succeed.
Here is the issue. I followed Symfony documentation to add Bootstrap to my project.
I indeed get a bootstrap folder in a new folder called "nodes_modules".
The thing is i can't find a global.scss file anywhere (as mentioned in the tutorial) then i don't know where to put the following command:
#import "~bootstrap/scss/bootstrap";
Do i have to create this file or does it exist somewhere in my Symfony project?
Thank you in advance.


Yes, global is your application scss file, it can be named different on you wish. You can refer this documentation in order to see how to configure it (it is app.scss in the example)


I understood what was wrong there! So if you are creating a Symfony 4.1 project on mac and you don't know where to import your bootstrap theme(s) since you don't have any assets folder here is the solution:
To have the assets folder you have to install the webpack "encore".
Please make sure you have node.js and yarn installed before that.
Then just run the following commands inside your root project directory:
composer require symfony/webpack-encore-pack
yarn install
You might have now an "assets" folder inside your project with an assets/css/app.css file and a assets/js/app.js file.
Thank you for your time ScayTrase.

Related

Symfony bundle - generate configuration file

I'm working on creating a Symfony bundle, so far so good, but I'm running into a problem when I want to generate a configuration/route file when installing the bundle. When I install the bundle I would like it to generate the configuration files in the app and not have to add them by hand.
Could someone help me please?
I tried to load yaml / xml files within my Extension file, I tried to import via services.xml but I can't make it working.
Thank you ! :)

Symfony 4 - Assets folder not found

According to Symfony Best Practices,
Store your assets in the assets/ directory at the root of your project.
But currently, I don't have this folder created and if I create it, I got the error telling me that ressources can't be found.
I tried composer require webassets , but don't working.
Anyone have the solution ?
Regards

Placing assets folder in root directory is best practice. Reason that root directory cannot be accessible from outside. You should try Symfony's Webpack Encore plugin. It compiles your minimized and compressed assets into public folder so they can never be shown as original.
If that is not fit your interest just put your whole assets folder into public directory.

You try following command.
$ composer require encore
$ yarn install
May be good to refer to here.
http://symfony.com/doc/current/frontend/encore/installation.html

Enable the encore composer require encore
update yarn yarn install

Adding ControlFX.jar file to build path

I am trying to install ControlFx for creating dialogs in my application. I have put controlsfx-8.x.x.jar file in the appropriate folder (lib/ext). It is the same folder where jfxrt.jar is present.
I am unable to add this jar to build path. The only option available is configure build path.
Can someone let me know what I am doing wrong?
Thanks

Controlsfx should not be put in lib/ext but simply added to your projects build path!

How to use Bootstrap with less in an express node js project?

I'm already using bootstrap.css. But i would like to surcharge the less variables without using bootstrap customize editor.
I would like to add a less file in my project. My project is a simple nodejs project with express and harpejs.
Where to find the less file ? Using express it will compile it when i will deploy the project ?
Thanks.

Look at using bower.
npm install -g bower
bower install bootstrap
You will then find all the less files in bower_components/bootstrap/less/*. Copy the bootstrap.less file to your CSS directory and make alterations (make sure the paths are correct).
You can then look at using some Grunt tasks to get the less to build.

How to add Compass syntax support to Jetbrains PhpStorm?

I'm using JetBrains PhpStorm, which is probably the most epic IDE I've ever used.
The question is simple. How do I add Compass syntax support to it? I've got it installed, it renders and works, but PhpStorm still complains about undefined imports and mixins.
How can I resolve this? Can Compass be included as an external library?
Edit: I'd just like to note that this feature request is for the RubyMine IDE (also by JetBrains), it's not for PhpStorm/WebStorm.

It's explanation of Martin's answer.
Symlink to compass gem directory in your sass folder works great.
Instruction(Windows)
open cmd with admin privileges
change path to your project sass folder, for example cd projectname\sass
run mklink /d compass $GEM_LOCATION\frameworks\compass\stylesheets\compass, as for me $GEM_LOCATION = C:\dev\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2
Thats all, now PhpStorm will not highlight compass mixins as errors, and will add them in autocomplete suggestions.
Warning: If you want to delete created symlink DON'T use delete, it will remove source directory.
open cmd with admin privileges, cd $yourProjectSassPath, and run rmdir compass

As the above user mentioned it also works to add the path to the Compass stylesheets as a resource directory in your project.
For example, my compass stylesheets are located at:
C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets
Go to Settings > Project settings > Directories.
Add a content root
Add the compass stylesheets directory
Click 'Resource Root' (the blue icon)
When you apply you will see that PhpStorm finds the compass stylesheets without any problems. You can even ctrl+click (windows) on them to open them directly.
Good luck!

I solved it by placing a symlink of the compass-directory (from $GEM_LOCATION/frameworks/compass/stylesheets/compass) into the folder where my stylesheet lives. It's more of a workaround but it makes me and the phpstorm-inspections/-autocompletion happy.

I think it's better to add the directory in the Directories settings: http://www.jetbrains.com/phpstorm/webhelp/directories.html
In the example above, add a new content root of C:\dev\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2.

This is more easily fixed by using a better source for the executable.
From: http://youtrack.jetbrains.com/issue/WEB-9139
In Windows, use an executable path like:
C:\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2\bin\compass
While on the Mac use something like:
/Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/bin/compass

Resources