如何在Chrome开发工具中获取地图角度CLI css文件？

Question

有没有办法使用源地图样式，以便Chrome Dev Tools中的编辑可以保留到添加的本地工作区？

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

我已经设置了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中app.component.css样式
• 我尝试使用ng build但它也将所有样式放入index.html的<style>

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

相关：

• 如何在Chrome Developer Tools中将CSS样式更改保存到ANGULAR 2.0组件？
• Angular-cli不使用--dev选项生成typescript文件
• 如何使用angular-cli webpack调试angular 2 app？ （在WebStorm中）
• SCSS SourceMap仅指向父选择器。
  • github.com/angular/angular-cli问题＃2826

感谢您提供的任何建议。

Answer 1

当您键入ng服务时 ，默认情况下，角度cli不包含css文件的源映射文件，但您可以通过键入此命令来包含它

ng serve -sm -ec

要么

ng serve --sourcemap --extractCss

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

Answer 2

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

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

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

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

我希望看到angular-cli在构建时做到这一点，或者在配置中有一个选项。