css - 如何使用Live Sass Compiler编译相关的scss文件？

Question

我正在修改mustard-ui的一堆相关scss文件vscode 上的 css 框架。 scss 文件被导入到 mustard-ui.scss 中，如下所示:

// Variables
@import 'vars/breakpoints';
@import 'vars/colors';


// Base
@import 'base/base';

我还将此片段添加到 Live Sass Compiler设置来定义放置输出编译的 .css 文件的路径:

"liveSassCompile.settings.formats": [{
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "/static/css/mystyle"
}]

然后从 static/css/mystyle/mustard-ui.css

获取编译后的 css

但问题是，当我编辑其中一个 scss 组件(例如 base.scss)时，mutard-ud.scss 不会自动编译以反射(reflect)更改。因此，我需要使用一些虚拟更新再次保存它，以获得更新的 mustard-ui.css。这显然是乏味和荒谬的。

我想知道是否有办法避免这个问题？如何命令编译器监视相关文件？

Answer 1

做两个思考:

1. 每个包含的文件(例如 base.scss)都必须以下划线开头 => _base.scss
2. 编辑您的settings.json并添加:

   "liveSassCompile.settings.includeItems": ["./path/to/your/main.scss"]
   

如果你现在更改 _base.scss，live sass 编译器将编译 main.scss! :)

希望有帮助!