为什么最近的 Angular 项目构建输出单个组件 CSS 源映射

Question

我从头开始生成了一个新的 Angular 18 项目，并引入了我的组件以利用新的选项默认值和设置。我很高兴我这样做了，但我注意到它现在似乎正在为我的单个组件指定的 CSS 生成源映射：

modal.component.css.map

和

task-list.component.css.map

是此处显示的两个示例。我在之前的构建过程中没有得到这些（我认为源自 Angular 8 或 9 左右），但项目和样式按预期工作，所以我不知道发生了什么变化以及如何解释我所看到的内容。

由于我使用纯 CSS 而不是 SCSS 或其他，所以我实际上并不需要样式源映射。我注意到这些是因为 Edge 开发人员工具试图下载它们，但它没有指定正确的 URL，所以它们是 404。

我正在考虑关闭样式的源映射，因为我无论如何都不需要它们。我只是想了解这些变化。

Answer 1

由于我使用纯 CSS 而不是 SCSS 或其他，所以我实际上并不需要样式源映射。我注意到这些是因为 Edge 开发人员工具试图下载它们，但它没有指定正确的 URL，所以它们是 404。

可能是缓存问题，其中

index.html

被浏览器缓存，并且它查找错误的

.map

文件。

我正在考虑关闭样式的源映射，因为我无论如何都不需要它们。我只是想了解这些变化。

即使您使用普通的

CSS

或

SASS

，sourceMap 的概念也将保持不变。它可以帮助开发人员直接在浏览器上轻松调试缩小/丑化的代码。这适用于开发模式，但不适用于生产模式。如果您检查样式检查器并单击源样式链接之一，它将直接打开该样式。

当它被添加时，我猜是 6 年前，查看它的源代码它来自

Angular 6

预计提交

但这并不重要，因为它旨在增强开发人员调试和检查源代码，并且在生产中应始终禁用。