Visual Studio 2019中如何基于css与min.css更新css.map源映射

先纠正核心认知误区 #

css源映射文件（.css.map）本质是从最上游的源文件（你的项目里就是default.less）编译生成的，完全不需要也不建议用现成的default.css、default.min.css反向生成。你遇到的map解析报错，根本不是map文件内容不够新，而是css、min.css、map三个文件的版本不匹配——比如有人改了css但没同步更新map，或者map生成时配置不对，三者内容对不上才会触发解析错误。走原有的编译流程统一重新生成三个文件，是成本最低的解决方案。

适配现有dotless环境的修复方案 #

你的项目已经预装了dotless NuGet包，完全可以不用额外引入第三方工具，直接复用现有工具链完成同步生成：

• 第一步：检查default.less的文件属性配置
  在解决方案资源管理器中选中default.less，打开属性面板，确认两个配置：
  • 「自定义工具」字段填写的是DotlessEmbeddedTool（dotless包内置的编译工具标识）
  • 「生成操作」设置为Content，避免文件被排除在编译流程外
• 第二步：确认dotless的编译配置开启了源映射生成
  打开项目根目录下的dotless.settings配置文件，确认三个关键配置项的值为true：

  • minify: 开启后会自动同步生成default.min.css压缩文件
  • sourceMap: 编译流程中自动生成对应的.css.map文件
  • includeSources: 把原始less的源码内容写入map文件，避免map解析时拉不到源文件内容报错

• 第三步：触发全量重新编译
  右键选中default.less，选择dotless内置的「编译Less文件」选项，工具会按照配置统一重新生成default.css、default.min.css、default.css.map三个文件，三者的内容、行号、映射关系会完全匹配，不会再出现解析报错。

无配置成本的简便工具替代方案 #

如果现有dotless配置找不到、修改后不生效，可以直接用VS2019扩展市场的内置工具快速完成生成：

• 安装VS2019的「Web编译器」扩展，扩展本身支持Less到CSS的编译、压缩、源映射生成全流程
• 在解决方案资源管理器中右键default.less，选择「Web编译器 - 编译文件」，设置输出路径为当前文件所在目录，开启压缩选项和源映射开关，一键即可生成完全匹配的三个产物文件。

应急临时处理方案 #

如果当前卡着运行报错、没时间走完整编译流程，最快的临时解决方式是直接关掉源映射的请求：

• 打开default.css文件，删掉文件最后一行的/*# sourceMappingURL=default.css.map */注释。删掉之后，页面加载css时不会主动去请求解析map文件，可以立刻恢复应用正常访问，后续有空再走编译流程补全正确的map文件就行。

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