Live SASS Compiler编译SCSS生成多余CSS文件如何解决

Live Sass Compiler 默认会监听项目内所有未被排除的 .scss 文件并单独编译。你在各分类目录下创建的用于模块汇总的 index.scss 没有被排除规则覆盖，因此会被额外编译为独立的 css 文件，和你做 7-1 SASS Architecture 架构时只需要单入口编译输出的需求冲突。

不需要更换工具，只需要调整扩展的排除规则，指定不需要单独编译的文件即可：

1. 打开VS Code的settings.json配置文件，修改liveSassCompile.settings.excludeList字段，把所有分目录下的汇总index.scss加入排除列表

{
  "liveSassCompile.settings.formats":[
     {
         "format": "expanded",
         "extensionName": ".css",
         "savePath": "/css"
     }
 ],
 "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**",
    "**/index.scss"
 ],
 "liveSassCompile.settings.generateMap": true,
 "liveSassCompile.settings.autoprefix": [
     "defaults"
 ]
}

2. 保存配置后重启Watch Sass服务，手动删除之前生成的多余index.css、index.css.map文件即可。
3. 为了彻底避免其他scss文件被误编译，可以额外添加includeList配置，指定只编译你的入口文件：

"liveSassCompile.settings.includeList": [
  "**/main.scss"
]

这个方案不依赖VS Code第三方扩展，稳定性、可扩展性更强，也完全不需要额外配置排除规则，天生适配单入口多模块的SASS架构，对npm不熟悉也可以按步骤快速搭建：

• 先安装Node.js，终端执行node -v能输出版本号即安装成功
• 在项目根目录打开终端，执行npm init -y，自动生成项目配置文件package.json
• 执行npm install sass --save-dev，安装官方dart-sass包，和你本地终端安装的1.53.0版本是同一套官方维护的工具
• 打开package.json，修改scripts字段，添加编译和监听命令：

{
  "scripts": {
    "sass:watch": "sass scss/main.scss css/main.css --style=expanded --watch --source-map",
    "sass:build": "sass scss/main.scss css/main.css --style=compressed --no-source-map"
  }
}

注意：命令中的路径需要和你实际项目结构匹配，scss/main.scss替换为你的入口scss文件路径，css/main.css替换为你要输出的css文件路径。--watch参数会启动文件监听，scss改动自动编译，和扩展的Watch Sass功能一致；--style=compressed会在打包时输出压缩后的css文件，适合生产环境使用。

• 开发时执行npm run sass:watch即可启动监听服务，最终发布时执行npm run sass:build就能输出编译好的单css文件。

使用官方npm包编译时，所有通过@forward、@use引入的子模块scss文件都会被合并编译到入口对应的css文件中，不会单独生成任何多余的css产物，后续如果需要加自动前缀、样式兼容处理，也可以很方便的对接PostCSS等工具链，适配更复杂的项目需求。

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