使用WebStorm中的Ruby SCSS Transpiler解决资产位置问题 [英] Resolving asset location issue using Ruby SCSS transpiler in WebStorm

问题描述

我有SCSS的这种结构:

I have this structure of SCSS:

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

styles.scss:

styles.scss:

@import "sass/index";

index.scss:

index.scss:

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

app文件夹在File Watcher设置中设置为工作目录，并在WebStorm中标记为资源根".但是，编译失败并显示以下错误: error sass/index.scss (Line 3: File to import not found or unreadable: bower_components/_colors.)

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.)

我已经阅读了@import在SCSS中的评估结果

I've read that @imports evaluated in SCSS

1. 相对于当前文件位置
2. 相对于根位置

但是对于我而言，很明显Ruby transpiler并没有尝试查找相对于根目录的文件.是虫子吗?还是我做错了什么?

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?

我通过Ruby安装了SCSS，并根据 https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html

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

这是我的File Watcher设置:

This is my File Watcher settings:

推荐答案

在命令行中运行scss.bat时，您将得到完全相同的问题:

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.)

请参见 https://github.com/sass/sass/issues/652:3.3中已弃用了自动放置在Sass加载路径上的当前工作目录.您需要使用-I选项显式传递加载路径，以使用相对于工作目录的文件夹.喜欢:

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:

这篇关于使用WebStorm中的Ruby SCSS Transpiler解决资产位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！