在 WebStorm 中使用 Ruby SCSS 转译器解决资产定位问题

Question

我有这样的 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 文件夹在 File Watcher 设置中设置为工作目录，并在 WebStorm 中标记为 "Resource Root"。但是，转译失败并出现错误： error sass/index.scss (Line 3: File to import not found or unreadable: bower_components/_colors.)

我读过 @imports 在 SCSS 中评估

相对于当前文件位置
相对于根位置

但在我的例子中，很明显 Ruby 转译器不会尝试查找相对于根位置的文件。这是一个错误吗？还是我做错了什么？

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

设置了File Watcher

这是我的文件观察器设置：

Answer 1

在命令行中运行 scss.bat 时，您会遇到完全相同的问题：

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 选项显式传递加载路径，以使用相对于工作目录的文件夹。喜欢：

在 WebStorm 中使用 Ruby SCSS 转译器解决资产定位问题

Resolving asset location issue using Ruby SCSS transpiler in WebStorm

ruby

sass

phpstorm

webstorm