如何在 Chrome 开发工具中获取 Map Angular CLI css 文件？

Question

有没有办法源映射样式，以便在 Chrome 开发工具中进行的编辑可以持久保存到添加的本地工作区？

Chrome 开发工具在元素检查器的 <style>...</style> 标记中显示我在 styles.scss 中的所有样式。

我已经设置了 Chrome 开发工具工作区，类似于@vt5491 在他们的 SO 中的做法：https://stackoverflow.com/a/37627935/1762493，我相信这适用于 .ts 文件，但元素样式不会链接回源映射元素检查，因为它们是用 ng 构建的，服务到 index.html 的 <style> 元素中。

• 我正在跑步ng serve -dev -p=8081
• 并尝试了ng serve -dev -p=8081 --aot=true，但得到了ENONET ng.factory.js missing error
• 我尝试将样式放入 app.component.css 与 styles.scss
• 我用ng build 试过这个，但它也把所有的样式都放进去 index.html's <style>

这只是当前使用 Angular CLI 的方式吗？也许调整下面的网络包？似乎为每个编译的样式表添加了<style> 标签。如果这就是 CLI 当前的工作方式，那么这可能不仅仅是一个问题，而是一个功能请求，因为我们正在正确地做前端工作，所以这样工作可以节省时间。

相关：

• How to save CSS Style changes to ANGULAR 2.0 components form within Chrome Developer Tools?
• Angular-cli not generating typescript files with --dev option
• How to debug angular 2 app using angular-cli webpack?（在 WebStorm 中）
• SCSS SourceMap 仅指向父选择器。
  • github.com/angular/angular-cli Issue #2826

感谢您提供的任何建议。

Answer 1

Angular-cli 使用 webpack，但它在 /node_modules/angular-cli/models 中有自己的配置文件。

您可以修改它们，但如果您升级 angular-cli，它将覆盖您的文件。所以一定要备份它们。

是的，它意味着内联<style> 标签。我同意这看起来很奇怪，应该放在一个单独的文件中，主要是这样它可以被用户缓存并减少你的视图块大小。可能他们认为内联很好，因为当您处于开发模式时您不希望它被缓存，这很好，但是在“ng build”时它应该被编译成自己的文件。

我知道你可以使用“extract-text-webpack-plugin”配置 webpack 来做到这一点，但我不太熟悉。

我希望看到 angular-cli 在构建时执行此操作，或者在配置中有一个选项。

Answer 2

当您键入 ng serve 时，默认情况下，angular cli 不包含 css 文件的 sourcemaps 文件，但您可以通过键入此命令来包含它

ng 服务 -sm -ec

或

ng serve --sourcemap --extractCss

我使用 Angular Cli -v 1.0.3，以及更多信息 - Angular CLI special cases