Scss file watcher : specify loadPath somewhere ?


I'm using WebStorm with a file watcher for compiling SCSS files. It works peachy, except that before I was using the command line Ruby SCSS watch command which allowed to specify a list of loadPaths, so the @import calls could be cleaner and simpler.

In Webstorm, if I @import a file with such a URL, it gets highlited as not found (since I didn't fine any loadPaths config).

This leads to variables and functions not being picked up, code completion and jump to reference not working.

The only current workaround is to put relative paths in all @import clauses, which is very ugly, and involves a lot of "..\..\..\blah\file.scss" and so on.

Did I miss something or is there no way to configure one or two project-wide load paths for @import lookups ?


Comment actions Permalink


no, it's not possible. See

Note that you can use Compass instead of SASS - Compass integration gets all your settings from config.rb file, so you can specify needed paths there

Comment actions Permalink

State wontfix, meaning you are not planning to make load paths work properly at all in the future ?

Well, with this issue plus the one with the generation of css files for partials, I must say that the scss file watcher thing and part of the support seems a bit unfinished ...

Comment actions Permalink

Ok now I have configured Compass with a config.rb file.

Works perfectly from the command line, however through WebStorm still issues ...

When I opened a scss file, it suggested me to add a "compass sass" file watch, which I did (I clicked the command link in the info window).

Now, when I edit the file, I see this in the output window :

"C:/Program Files (x86)/Ruby200/bin/compass.bat" compile E:/WebClient/app E:/WebClient/app/scss/app-rtl.scss
You must compile individual stylesheets from the project directory.

Here is my config.rb

environment = :development

http_path = "/"
project_path = "e:\\webclient\\app"
cache_path = "c:\\temp\\.sass-cache"
output_style = (environment == :production) ? :compressed : :expanded
line_comments = (environment == :production) ? false : true

css_path = "e:\\webclient\\app\\css"
sass_path = "e:\\webclient\\app\\scss"

add_import_path "e:\\webclient\\lib\\scss"
add_import_path "e:\\webclient\\lib\\scss\\fonts"
add_import_path "e:\\webclient\\lib\\scss\\fnd"

What should I do to make it compile properly please ?

Comment actions Permalink

Ok I made it work by changing the "Arguments" option value in the file watcher to :

compile "E:\\WebClient\\app\\scss"

which is the path where the main app.scss is located, and also the config.rb

The syntax inserted by WebStorms by default was actually calling compile on the specific file that was just modified, not what is wanted.

It all compiles fine now, but I still have issues with @imports.

Let's imagine I have a partial


now if in my main app.scss I do

@import "mything";

it does compile, but WebStorm still displays an error in the source view with the hint "Can not resolve import", so I have no code completion or reference declaration jumps and so on, still.

I have configured the "Compass support" part in the settings though, with the proper path to my config.rb there (otherwise the compass file watched could not have compiled properly anyway).

How to get WebStorms to properly resolve the import please ?

Comment actions Permalink

hello support ?

Comment actions Permalink


works fine for me. Can you attach a sample project that shows up the issue?

Comment actions Permalink

I opened another more speicfic and simplified question where I provided more details,  thanks for the reply.

Comment actions Permalink

I got this result while searching for a similar or the same problem and as i figured out, there is a way to do this in phpstorm and i think that should also be possible in webstorm?

anyway, i add my approach here.

before the path in scss file looked like this:

@import "../../node_modules/bootstrap/scss/mixins/grid";

thats how my import looks like anywhere in scss file now:

@import "bootstrap/scss/mixins/grid";

what i added in my File Watcher in Arguments:

--load-path=$ContentRoot$/node_modules $FileName$:$FileNameWithoutExtension$.css

For more info:

Sass: @import (

Sass: Dart Sass Command-Line Interface (

Comment actions Permalink

>as i figured out, there is a way to do this in phpstorm and i think that should also be possible in webstorm?

this functionality is the same in both IDEs so it should work equally well


Please sign in to leave a comment.