[英]How to Source Map Angular CLI css files in Chrome Dev Tools?
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中的编辑可以保留到添加的本地工作区?
Chrome Dev Tools is showing all my styles in styles.scss
in a <style>...</style>
tag in the element inspector. Chrome开发工具在
styles.scss
中的元素检查器的<style>...</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. 我已经设置了Chrome开发工具工作区,类似于@ vt5491在他们的SO中所做的那样: https ://stackoverflow.com/a/37627935/1762493,这对
.ts
文件有用,我相信但是元素样式没有链接回元素检查中的源映射,因为它们已经使用ng服务于index.html
的<style>
元素构建。
ng serve -dev -p=8081
ng serve -dev -p=8081
ng serve -dev -p=8081 --aot=true
but got a ENONET ng.factory.js missing error
ng serve -dev -p=8081 --aot=true
但是获得了ENONET ng.factory.js missing error
app.component.css
versus styles.scss
app.component.css
和styles.scss
中app.component.css
样式 ng build
but it also puts all styles into index.html
's <style>
ng build
但它也将所有样式放入index.html
的<style>
Is this just the way it is currently with the Angular CLI? 这是Angular CLI目前的方式吗? Maybe tweaking the web-pack underneath?
也许调整下面的网络包? It seems to be adding
<style>
tags per compiled stylesheet. 它似乎是为每个编译的样式表添加
<style>
标签。 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. 如果这是CLI当前的工作方式,那么这可能不仅仅是一个问题,而是一个功能请求,因为我们正在进行前端工作 ,因此这样做可以节省时间。
Related to: 相关:
Thanks for any advice offered. 感谢您提供的任何建议。
When you type ng serve by default angular cli doesn't include sourcemaps files for css files but you can include it by typing this command 当您键入ng服务时 ,默认情况下,角度cli不包含css文件的源映射文件,但您可以通过键入此命令来包含它
ng serve -sm -ec
ng serve -sm -ec
or 要么
ng serve --sourcemap --extractCss
ng serve --sourcemap --extractCss
I use Angular Cli -v 1.0.3, and More information - Angular CLI special cases 我使用Angular Cli -v 1.0.3,以及更多信息 - Angular CLI特例
Angular-cli uses webpack, but it comes with its own configuration files in /node_modules/angular-cli/models. Angular-cli使用webpack,但它在/ node_modules / angular-cli / models中有自己的配置文件。
You can modify them, but if you upgrade angular-cli it will overwrite your files. 您可以修改它们,但如果升级angular-cli,它将覆盖您的文件。 So make sure to back them up.
所以一定要备份它们。
Yes, it is meant to go inline <style>
tags. 是的,它是用于内联
<style>
标签。 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.
可能是因为他们认为内联是好的,因为当你处于开发模式时,你不希望它被缓存,这很好,但是在'ng build'上它应该被编译为它自己的文件。
I know you can configure webpack to do that using the "extract-text-webpack-plugin", but I am not too familiar with it. 我知道你可以使用“extract-text-webpack-plugin”来配置webpack,但我不太熟悉它。
I would like to see angular-cli do that on build or have an option in the configuration for that. 我希望看到angular-cli在构建时做到这一点,或者在配置中有一个选项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.