Sublime Text中SASS配置：保存@import导入文件时自动编译main.scss

当然可以搞定这个麻烦！我之前也被来回切换文件编译的操作烦得不行，改完子文件还要切回主文件按Ctrl+B，完全是浪费时间。下面是亲测有效的两种方法，你可以根据自己的情况选：

方法一：自定义自动构建系统（无需插件） #

这是最原生的解决方案，不用装额外插件，靠Sublime自带的构建系统就能实现：

1. 打开Sublime Text，点击顶部菜单栏的 Tools -> Build System -> New Build System
2. 把默认的模板内容删掉，替换成下面的配置（根据你用的Libsass工具调整）：

如果你用的是原生sass命令（兼容Libsass的Dart Sass等） #

{
  "cmd": ["sass", "--update", "${project_path}/main.scss:${project_path}/dist/main.css"],
  "selector": "source.scss",
  "file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$",
  "on_save": true
}

如果你用的是node-sass（Node.js版Libsass） #

{
  "cmd": ["node-sass", "--output-style", "expanded", "${project_path}/main.scss", "${project_path}/dist/main.css"],
  "selector": "source.scss",
  "file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$",
  "on_save": true
}

3. 保存这个构建系统，命名为 Libsass Auto Build.sublime-build，保存位置选默认的Sublime Packages/User目录即可
4. 激活这个构建系统：点击 Tools -> Build System -> Libsass Auto Build
5. 最后记得把你的项目根目录用Sublime打开（File -> Open Folder），这样${project_path}才能正确指向你的项目根目录，确保路径匹配你实际的main.scss位置和输出CSS的位置

关键参数说明：

• on_save: true：开启“保存时自动执行构建”的核心功能
• selector: source.scss：只要是SCSS文件（包括被导入的子文件），保存时都会触发这个构建
• cmd里的路径：你需要把main.scss和输出CSS的路径改成自己项目里的实际路径，比如如果main.scss在根目录，输出CSS在根目录的css文件夹，就改成${project_path}/main.scss:${project_path}/css/main.css

方法二：用SublimeOnSaveBuild插件（更灵活） #

如果你需要针对不同项目配置不同规则，或者想要更多自定义选项，可以装这个插件：

1. 打开Package Control（Ctrl+Shift+P，输入Install Package），搜索并安装SublimeOnSaveBuild
2. 打开插件的设置文件（Preferences -> Package Settings -> SublimeOnSaveBuild -> Settings - User），添加类似下面的配置：

{
  "filename_filter": "\\.scss$",
  "build_on_save": true,
  "commands": [
    {
      "cmd": ["sass", "--update", "${project_path}/main.scss:${project_path}/dist/main.css"],
      "working_dir": "${project_path}"
    }
  ]
}

同样，根据你用的sass工具调整cmd里的命令和路径就行

这样设置之后，不管你保存哪个被导入的SCSS子文件，Sublime都会自动帮你编译main.scss，再也不用来回切换文件啦！

内容的提问来源于stack exchange，提问作者Toki