2

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 ?

LazyOne
  • 158,824
  • 45
  • 388
  • 391
Martin
  • 23,844
  • 55
  • 201
  • 327
  • 1
    If you have Bourbon in you project, please try to mark it as a resource root (right-click on it in the Project view - Mark as Resource root). – Ekaterina Prigara Jul 21 '16 at 10:46

1 Answers1

2

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.

Vasiliy Artamonov
  • 939
  • 2
  • 8
  • 24
Shawn Lovelidge
  • 36
  • 3
  • Works! Note: as of PhpStorm 2021.2 you have to do it the way it is described in the answer, and not by marking directory from the context menu in the Project View, because there is no option to mark ```node_modules``` as Root Resource directory – Vasiliy Artamonov Aug 10 '21 at 13:27