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

Question

我正在修改vscode上mustard-uicss框架的一堆相关scss文件。 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 不会自动编译以反映更改。所以我需要用一些虚拟更新再次保存它以获得更新的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！ :)

希望对您有所帮助！