问题描述
我正在构建一个 Angular 2.0 CLI 应用程序 - 碰巧我有很多 CSS 调整要做.
I'm building an Angular 2.0 CLI app - and it just happens that i have lots and lot of CSS tweaks to make.
我当然可以在 Webstorm 中修改一些东西，按 Ctrl+S 然后等待 3-7 秒让 webpack 构建过程检测这些更改并更新视图.
I can of course modify something inside Webstorm, press Ctrl+S and than wait 3-7 seconds for the webpack build process to detect those changes and update the view.
但是我觉得我在浪费很多时间来做一些小改动，比如:边框半径从 5px 到 3px - 这让我很伤心..
But I feel like I'm wasting a lot of time for little changes like: border-radius form 5px to 3px - it's killing me..
如果我在 Chrome 开发者工具中更改内容 - 它会立即更新 - 不会浪费时间.. 即时反馈！
If instead i change stuff inside Chrome Developer Tools - it updates instantly - no time wasted.. Instant Feedback!
问题:
如何将 Chrome 的所有 CSS 更改保存回 Angular CLI 项目? 如果可能，跨多个组件:)
How do i save all those CSS changes form Chrome back into the Angular CLI project? Across multiple components if possible:)
大问题:
我知道这可以通过简单的 css 文件实现，但 Angular CLI 将所有内容捆绑在 main.bundle 或 style.bundle 或类似的地方，如下所示:(这是开发模式不是生产)
I know this is possible with simple css files but the Angular CLI bundles everything inside the main.bundle or styles.bundle or somewhere similar like you can see below:( this is development mode not production )
我想这很重要，并且可以成为 Angular 社区内部的一个主要吸引力 - 如果现在还没有弄清楚......非常感谢！
I guess this is important, and can be a major draw back inside Angular Community - if hasn't been already figured out by now..Thank's so much!
推荐答案
首先，您可以从 chrome devtools 编辑您的本地 css 文件.
First, you can edit your local css files from chrome devtools.
通过在 angualr.json 文件中添加extractCss"，并将您的项目文件夹添加到 devtools 文件系统文件夹，您将能够从 devtools 编辑您的本地项目文件.查看我的回答此处了解更多详情.
By adding "extractCss" in angualr.json file, and adding your project folder to devtools filesystem folders, you'll be able to edit your local project files from devtools. Look at my answer here for more details.
至于我觉得我浪费了很多时间，这没什么可做的，项目css文件中的每个更改都会在重新编译时解决.
As for I feel like I'm wasting a lot of time, there is nothing to do about this, each change in your project css files will resolve in recompiling.
这篇关于如何在 Chrome 开发人员工具中将 CSS 样式更改保存到 ANGULAR 2.0 组件表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！