如何在 Chrome 开发工具中源映射 Angular CLI css 文件？
How to Source Map Angular CLI css files in Chrome Dev Tools?
有没有办法 source-map 样式，以便在 Chrome 开发工具中所做的编辑可以持久保存到添加的本地工作区？
Chrome Dev Tools 在元素检查器的 <style>...</style> 标签中显示了我在 styles.scss 中的所有样式。
我已经设置了 Chrome Dev Tools 工作区，类似于 @vt5491 在他们的 SO 中所做的： 我相信这适用于 .ts 文件，但元素样式不会 link 返回到元素检查中的源映射，因为它们是使用 ng 服务构建到 index.html 的 <style> 元素中的。
- 我是 运行
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>
这就是目前 Angular CLI 的方式吗？也许调整下面的 web-pack ？它似乎在每个编译的样式表中添加 <style> 标签。如果这就是 CLI 当前的工作方式，那么也许这不仅仅是一个问题，而是一个功能请求，因为 我们正在做 front-end 正确的工作 ，因此进行此工作将节省时间。
相关：
- 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
（在 WebStorm 中） - 仅指向父选择器的 SCSS SourceMap。
感谢您提供的任何建议。
Angular-cli使用webpack，但在/node_modules/angular-cli/models.
中自带配置文件
您可以修改它们，但是如果您升级 angular-cli，它将覆盖您的文件。所以一定要备份它们。
是的，它用于内嵌 <style> 标签。我同意这看起来很奇怪，应该放在一个单独的文件中，主要是这样它可以被用户缓存并减少您的视图块大小。可能是他们认为内联很好，因为当您处于开发模式时您不想缓存它，这很好，但是在 'ng build' 上它应该被编译到它自己的文件中。
我知道你可以使用 "extract-text-webpack-plugin" 配置 webpack 来做到这一点，但我不太熟悉它。
我希望看到 angular-cli 在构建时这样做，或者在配置中有一个选项。
当您默认键入 ng serve 时 angular cli 不包含 css 文件的源映射文件，但您可以通过键入此命令来包含它
ng serve -sm -ec
或
ng serve --sourcemap --extractCss
我使用 Angular Cli -v 1.0.3，更多信息 - Angular CLI special cases
有没有办法 source-map 样式，以便在 Chrome 开发工具中所做的编辑可以持久保存到添加的本地工作区？
Chrome Dev Tools 在元素检查器的 <style>...</style> 标签中显示了我在 styles.scss 中的所有样式。
我已经设置了 Chrome Dev Tools 工作区，类似于 @vt5491 在他们的 SO 中所做的：.ts 文件，但元素样式不会 link 返回到元素检查中的源映射，因为它们是使用 ng 服务构建到 index.html 的 <style> 元素中的。
- 我是 运行
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>
这就是目前 Angular CLI 的方式吗？也许调整下面的 web-pack ？它似乎在每个编译的样式表中添加 <style> 标签。如果这就是 CLI 当前的工作方式，那么也许这不仅仅是一个问题，而是一个功能请求，因为 我们正在做 front-end 正确的工作 ，因此进行此工作将节省时间。
相关：
- 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
- 仅指向父选择器的 SCSS SourceMap。
感谢您提供的任何建议。
Angular-cli使用webpack，但在/node_modules/angular-cli/models.
中自带配置文件您可以修改它们，但是如果您升级 angular-cli，它将覆盖您的文件。所以一定要备份它们。
是的，它用于内嵌 <style> 标签。我同意这看起来很奇怪，应该放在一个单独的文件中，主要是这样它可以被用户缓存并减少您的视图块大小。可能是他们认为内联很好，因为当您处于开发模式时您不想缓存它，这很好，但是在 'ng build' 上它应该被编译到它自己的文件中。
我知道你可以使用 "extract-text-webpack-plugin" 配置 webpack 来做到这一点，但我不太熟悉它。
我希望看到 angular-cli 在构建时这样做，或者在配置中有一个选项。
当您默认键入 ng serve 时 angular cli 不包含 css 文件的源映射文件，但您可以通过键入此命令来包含它
ng serve -sm -ec
或
ng serve --sourcemap --extractCss
我使用 Angular Cli -v 1.0.3，更多信息 - Angular CLI special cases