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.

5 comments
Comment actions Permalink

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:

/resources/assets/sass/_bootstrap.scss


Now make sure _bootstrap.scss has the following content:
@import "../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap"; (change path if required)

This will automatically enable Bootstrap code completion in app.scss and still not break stuff for automatic build systems like Gulp.

0
Comment actions Permalink

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!

0
Comment actions Permalink

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!

0
Comment actions Permalink

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

0
Comment actions Permalink

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.

0

Please sign in to leave a comment.