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

Question

我正在vscode上修改mustard-ui css框架的一堆相关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"
}]

生成的编译 css 然后从 static/css/mystyle/mustard-ui.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！:)

希望有帮助！