Vite无法生成CSS Sourcemap问题求助

安全阿岳

2026-6-13

解决Vite CSS Sourcemap未生成的思路

确认Sourcemap输出路径是否正确
你的配置将CSS文件输出到web/themes/custom/{theme}/css/目录下，对应的Sourcemap文件应该是同目录下的xxx.css.map。先检查该路径下是否存在文件，不要仅在项目根目录或其他无关位置查找。

显式配置Rollup输出的Sourcemap
虽然已设置build.sourcemap: true，但可尝试在Rollup的output配置中显式开启sourcemap，确保CSS资产的Sourcemap被生成：

rollupOptions: {
  // ... 其他原有配置
  output: {
    sourcemap: true, // 新增该行
    assetFileNames: ({ name }) => {
      const [theme, fileName] = name.split("/");
      return `${theme}/css/${fileName}`; 
    },
  },
}

区分开发/生产模式的配置逻辑
css.devSourcemap: true仅对开发模式（vite dev）生效，生产构建（vite build）依赖build.sourcemap: true：
- 若为开发环境，无需寻找物理.map文件，直接查看浏览器开发者工具的Sources面板，确认是否能加载到SCSS源文件（开发模式通常使用内存sourcemap）
- 若为生产构建，确保build.sourcemap未被其他配置覆盖。
简化配置定位问题
暂时移除复杂的glob输入和自定义输出逻辑，用极简配置测试：
```
export default defineConfig({
  build: {
    sourcemap: true,
    outDir: "dist",
    rollupOptions: {
      input: {
        test: path.resolve(__dirname, "web/themes/custom/theme_one/src/scss/main.scss"),
      },
    },
  },
});
```
运行vite build后，查看dist目录是否生成test.css和test.css.map。若生成成功，再逐步恢复原有配置，定位问题节点。
升级Vite到最新稳定版
部分旧版本Vite在处理CSS预处理器Sourcemap时存在兼容性bug，执行命令升级：
```
npm update vite
```
验证输入文件的有效性
在配置中添加日志，确认glob获取的SCSS文件路径正确：
```
console.log("SCSS Files:", scssFiles);
```
运行vite build时查看控制台输出，确保所有目标文件都被正确识别为Rollup输入。