如何在Chrome开发工具中生成Map Angular CLI CSS文件? [英] How to Source Map Angular CLI css files in Chrome Dev Tools?

问题描述

是否可以使用源地图样式，以便可以将在Chrome开发工具中进行的编辑保存到添加的本地工作区中?

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

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

我已经设置了Chrome Dev Tools工作区，类似于@ vt5491在其SO中的工作方式: https://stackoverflow.com/a/37627935/1762493 ，这对.ts文件是有效的，但是我相信元素样式不会链接回元素检查中的源映射，因为它们是使用ng serve构建的，并且是在index.html中构建的的<style>元素.

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.

• 我正在运行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>

• 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>

这仅仅是Angular CLI的当前方式吗?也许要调整下面的Web Pack?似乎每个编译的样式表都添加了<style>标签.如果这是CLI当前的工作方式，那么这可能不仅是一个问题，而且是一项功能请求，因为我们正在正确地进行前端工作，因此进行这项工作可以节省时间.

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.

有关:

• 如何在CSS Developer中将CSS样式更改保存到ANGULAR 2.0组件表单中?
• Angular-cli不使用--dev生成打字稿文件选项
• 如何使用angular- cli webpack?(在WebStorm中)
• 仅指向父选择器的SCSS SourceMap.
  • github.com/angular/angular-cli问题#2826
  • 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.

    推荐答案

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

    Angular-cli uses webpack, but it comes with its own configuration files in /node_modules/angular-cli/models.

    您可以修改它们，但是如果升级angular-cli，它将覆盖您的文件.因此，请确保对其进行备份.

    You can modify them, but if you upgrade angular-cli it will overwrite your files. So make sure to back them up.

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

    Yes, it is meant to go inline <style> tags. I agree that this seems weird and should be in a separate file, mainly so it can be cached by the user and reduce your views chunk size. It might be that they think inline is good as when you're in development mode you don't want it cached, which is fine, but on 'ng build' it should be compiled to its own file.

    我知道您可以使用"extract-text-webpack-plugin"将webpack配置为执行此操作，但是我对此不太熟悉.

    I know you can configure webpack to do that using the "extract-text-webpack-plugin", but I am not too familiar with it.

    我希望看到angular-cli在构建时就可以做到这一点，或者在配置中为此选择一个选项.

    I would like to see angular-cli do that on build or have an option in the configuration for that.

    这篇关于如何在Chrome开发工具中生成Map Angular CLI CSS文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！