Resolving asset location issue using Ruby SCSS transpiler in WebStorm

问题

I have this structure of SCSS:

app
    styles.scss
    bower_components
        _colors.scss
        _fonts.scss
    sass
        index.scss

styles.scss:

@import "sass/index";

index.scss:

@import "bower_components/_colors";
@import "bower_components/_fonts";

app folder is set as working directory in File Watcher settings and is marked as "Resource Root" in WebStorm. However, transpiling fails with error: error sass/index.scss (Line 3: File to import not found or unreadable: bower_components/_colors.)

I've read that @imports evaluated in SCSS

relative to current file location
relative to root location

But in my case it is obvious that Ruby transpiler doesn't do attempt to find files relative to root location. Is it a bug? Or I am doing something wrong?

I installed SCSS through Ruby and set up File Watcher according to https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html

This is my File Watcher settings:

回答1:

You will get exactly the same issue when running scss.bat in command line:

C:\Projects\prj>cd app

C:\Projects\prj\app>C:/Ruby193/bin/scss.bat --no-cache --update sass/index.scss
error sass/index.scss (Line 1: File to import not found or unreadable: bower_components/_colors.)

See https://github.com/sass/sass/issues/652: current working directory being automatically placed on the Sass load path is deprecated in 3.3. You need passing the load path explicitly with -I option to work with folders relative to the working directory. Like:

来源：https://stackoverflow.com/questions/37162049/resolving-asset-location-issue-using-ruby-scss-transpiler-in-webstorm

标签

ruby

Sass

phpstorm

WebStorm