How to Source Map Angular CLI css files in Chrome Dev Tools?

Question

Is there a way to source-map styles so that edits made in Chrome Dev Tools can be persisted to a added local Workspace?

Chrome Dev Tools is showing all my styles in styles.scss in a <style>...</style> tag in the element inspector.

I've setup Chrome Dev Tools workspaces similar to how @vt5491 did it in their SO here: https://stackoverflow.com/a/37627935/1762493 and that is working for the .ts files I believe but element styles don't link back to source maps in the element inspect as they've been built with ng serve into index.html's <style> element it seems.

• I'm running ng serve -dev -p=8081
• and tried ng serve -dev -p=8081 --aot=true but got a ENONET ng.factory.js missing error
• I tried putting styles in app.component.css versus styles.scss
• I tried this with ng build but it also puts all styles into index.html's <style>

Is this just the way it is currently with the Angular CLI? Maybe tweaking the web-pack underneath? It seems to be adding <style> tags per compiled stylesheet. If this is how the CLI is working currently then maybe this isn't just a question but a feature request because we are doing front-end work right, so having this working would save time.

Related to:

• 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? (in WebStorm)
• SCSS SourceMap pointing to the Parent selector only.
  • github.com/angular/angular-cli Issue #2826

Thanks for any advice offered.

Answer 1

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

  

ng serve -sm -ec

或

  

ng serve --sourcemap --extractCss

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

Answer 2

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

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

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

我知道您可以使用＆＃34; extract-text-webpack-plugin＆＃34;来配置webpack，但我不太熟悉它。

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