vsCode Live Sass Compiler修改SCSS无法自动生成CSS怎么解决

问题根因 #

• 以下划线开头的SCSS文件（如项目中的_sidebar.scss）属于SASS规范定义的局部片段文件，本身不会作为独立编译入口，插件默认逻辑下单独保存这类文件不会触发编译动作
• 之前的配置仅指定了编译输出规则，没有限定监听范围，插件默认会扫描当前工作区下所有可识别的SCSS文件，如果打开的工作区层级过高，就会出现编译全盘无关文件夹SCSS的异常

修复操作 #

1. 确认入口文件导入规则正确
   main.scss作为唯一编译入口，需要正确引入局部片段文件，对应dashboard/_sidebar.scss的导入不需要写文件下划线前缀和.scss后缀，参考写法：

   // 推荐使用新语法
   @use 'dashboard/sidebar';
   // 旧版兼容写法
   @import 'dashboard/sidebar';
   

2. 写入正确的项目级配置
   在项目根目录新建.vscode/settings.json文件，优先使用项目级配置，不要写入全局用户配置，避免影响其他项目的SCSS编译逻辑，写入以下配置内容：

   {
     "liveSassCompile.settings.formats": [
       {
         "format": "compressed",
         "extensionName": ".css",
         "savePath": "~/../style",
         "savePathSegmentKeys": null,
         "savePathReplaceSegmentsWith": null
       }
     ],
     // 仅监听当前项目style目录下的所有SCSS/SASS文件
     "liveSassCompile.settings.includeItems": [
       "/style/**/*.scss",
       "/style/**/*.sass"
     ],
     // 排除无需监听的目录
     "liveSassCompile.settings.excludeList": [
       "**/node_modules/**",
       "**/.git/**"
     ],
     // 启动插件时自动开启监听
     "liveSassCompile.settings.watchOnLaunch": true
   }
   

   注意：用VS Code打开项目时，必须直接选中包含index.html和style文件夹的根目录作为工作区，不要打开上层目录，否则路径匹配规则会失效。

3. 重启生效
   保存配置后重启VS Code，点击底部状态栏的「Watch Sass」按钮开启监听即可。后续修改项目内任意SCSS文件（包括下划线开头的局部片段文件），保存时都会自动触发编译，最终CSS文件会输出到指定的style/style.css路径，不会再扫描编译其他无关目录的SCSS文件。

如果配置完成后修改局部文件仍无法触发编译，卸载当前安装的原版Live Sass Compiler，替换为仍在维护的社区维护版本即可。

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