编译Sass时为什么会生成额外的.css和.css.map文件？

为什么会生成.css.map文件 #

.css.map是**源码映射（Source Map）**文件，属于SASS/SCSS编译工具的默认输出项，作用是将编译压缩后的CSS代码映射回原始的SCSS源码位置，方便你在浏览器开发者工具中调试样式时，直接定位到对应SCSS文件的代码行，不属于编译异常。

为什么会生成额外的.css文件 #

额外出现的非预期.css文件，本质是你的编译工具默认遍历了所有可识别的SCSS文件并逐一编译，而非仅编译你指定的入口文件，常见场景如下：

• 若使用VS Code的Easy Sass、Live Sass Compiler等插件：插件默认会扫描工作区所有.scss/.sass后缀的文件逐一编译，你导入的bootstrap.scss以及其他分片SCSS文件都会被单独编译输出。
• 若使用Sass CLI、Webpack、Vite等构建工具：检查你的构建配置的entry入口项是否写了通配符（比如*.scss）匹配了所有SCSS文件，而非仅指定你的业务入口SCSS路径。

解决方法 #

1. 关闭Source Map输出（不需要调试SCSS时可操作）
   • Sass CLI执行编译时添加--no-source-map参数
   • 编辑器插件在配置项中将generateMap类开关设为false
2. 明确指定编译规则，排除不需要单独编译的文件
   以常用的Live Sass Compiler插件为例，在项目.vscode/settings.json中添加如下配置即可：

   "liveSassCompile.settings.formats": [
     {
       "format": "expanded",
       "extensionName": ".css",
       "savePath": "/lib/css"
     }
   ],
   "liveSassCompile.settings.excludeList": [
     "**/node_modules/**",
     "**/bootstrap*.scss"
   ]
   

3. 若使用工程化构建工具，将构建配置的样式入口仅指定为你需要输出的SCSS入口文件即可。

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