如何在Chrome开发者工具中保存CSS样式更改到ANGULAR 2.0组件表单中?

3
我正在构建一个Angular 2.0 CLI应用程序 - 我需要进行很多CSS调整。
当然,我可以在Webstorm中修改某些内容,按Ctrl + S,然后等待3-7秒钟,让webpack构建过程检测到这些更改并更新视图。
但是,对于像将边框半径从5px修改为3px这样的小更改,我感觉我浪费了很多时间。如果我在Chrome开发者工具中更改东西 - 它会立即更新 - 不会浪费时间...瞬间反馈!
问题:如何将Chrome中的所有这些CSS更改保存回Angular CLI项目中?如果可能,跨多个组件:)
最大的问题是:我知道这对于简单的css文件是可能的,但是Angular CLI将所有内容捆绑在main.bundle或styles.bundle中,或者类似的地方,如下所示: enter image description here (这是开发模式而非生产模式)

我想这很重要,可能会成为Angular社区的主要障碍 - 如果现在还没有被解决..非常感谢!


嗨,@Alon,我在这里有同样的问题:https://dev59.com/PFkS5IYBdhLWcg3wQEYU,只是有不同的截图。我正在开始研究如何扩展/修改CLI或者[@ngtools/webpack](https://www.npmjs.com/package/@ngtools/webpack)的行为,以便至少在“-dev”模式下不将样式包装到`<style>`标签中。如果我成功了,我会在这里报告。 - Mikeumus
1个回答

0

首先,您可以通过Chrome DevTools编辑本地CSS文件。

通过在angular.json文件中添加“extractCss”,并将您的项目文件夹添加到devtools文件系统文件夹中,您将能够从devtools编辑本地项目文件。请查看我的答案以获取更多详细信息。

至于我觉得我浪费了很多时间,这方面无可奈何,每次更改项目CSS文件都会导致重新编译。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接