sasswebpackwebstormbourbonsass-loader

Bourbon with webpack: WebStorm complains about not resolving bourbon in IDE

I have managed to configure and get working bourbon with webpack. I just included the following on sass loader

&includePaths[]=' + bbPath

In a SCSS file I just do 

 @import "bourbon";

I now its working because I am calling mixins via scss files and I see the output, also webpack doesn't complain.

Problem is that in WebStorm IDE it states that the above @import line that bourbon cannot be resolved.

I tried doing 

@import "~bourbon";

which makes WebStorm happy but the webpack fails with 

Module build failed:
var path = require('path');
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
      in /Users/test/node_modules/bourbon/index.js (line 1, column 1)

maybe the fault here is WebStorm, is there some way to force WebStorm to understand that the @import bourbon is valid ?

Solution

  • I believe you can control the path of all scss files by telling Webstorm of the Root Resource Path.

    WebStorm File Menu --> Preferences --> Directories --> Right click on your node_modules directory and check Resource Root option.

    Once this is set then WebStorm IDE will know of your import @'bla-bla' files.