Bootstrap code completion for non-standard location
I am using PHPStorm 9 for a Laravel 5/Bootstrap 3 project. However, because I am also using Bower to pull some dependencies Bootstrap asset files are stored in a somewhat specific location.
To ilustrate the problem (/ will be referencing my project root folder)
/bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/ (this is where all the Bootstrap SASS files are stored, it contains partials, mixins etc., lets call it folder A)
...
/resources/assets/sass/app.scss (this is where the actual application SASS code is going)
What I need is a way for PHPStorm to be able to read content from folder A and offer code completion from it to app.scss.
Is there any way to do this? The original app.scss simply uses @import "bootstrap" and that's fine when building the project (building is managed by Gulp) however what I would really like to have is Bootstrap code completion in my app.scss file.
Please sign in to leave a comment.
Ok I feel stupid now. Five minutes after posting this question and I get an idea how to solve the issue (of course it took me a whole day not to solve it).
Here is how to make Bootstrap code completion available in case Bootstrap assets are in a non-standard location.
In the same folder where app.scss is located make a file called _bootstrap.scss like this:
Now make sure _bootstrap.scss has the following content:
This will automatically enable Bootstrap code completion in app.scss and still not break stuff for automatic build systems like Gulp.
Hm, but thats not a really clean solution.
It would be nice if you can add something like a soft link to your assets.
For example: If I include just single Bootstrap components to my sass files, I need to create a new file and include the relative path to the components for each file!
This has been one of the single most frustrating things I have witnessed about JetBrains line of IDE's. I really love there software, but damn this is so frustrating!
Try marking /bower_components/bootstrap-sass-official/assets/stylesheets/ as Resource root (Mark directory as/Resource root) to be able to import files in this directory using file name only
I believe I was able to resolve this issue by adding the bootstrap-sass gem to the load path of my module. The red lines disappear, and I can right-click onto a bootstrap import and it will take me to the source file. I just got this to work, so I'm not sure if there are any side effects.