Mikhail Batcer Mikhail Batcer - 6 months ago 36
Ruby Question

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
@import
s evaluated in SCSS


  1. relative to current file location

  2. 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:

enter image description here

Answer

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:

enter image description here

Comments