如何在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
• 我试图与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 在构建时执行此操作，或者在配置中有一个选项。