如何在Chrome開發工具中獲取地圖角度CLI css文件？

Question

有沒有辦法使用源地圖樣式，以便Chrome Dev Tools中的編輯可以保留到添加的本地工作區？

Chrome開發工具在styles.scss中的元素檢查器的<style>...</style>標記中顯示我的所有樣式。

我已經設置了Chrome開發工具工作區，類似於@ vt5491在他們的SO中所做的那樣： https ：//stackoverflow.com/a/37627935/1762493，這對.ts文件有用，我相信但是元素樣式沒有鏈接回元素檢查中的源映射，因為它們已經使用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中app.component.css樣式
• 我嘗試使用ng build但它也將所有樣式放入index.html的<style>

這是Angular CLI目前的方式嗎？ 也許調整下面的網絡包？ 它似乎是為每個編譯的樣式表添加<style>標簽。 如果這是CLI當前的工作方式，那么這可能不僅僅是一個問題，而是一個功能請求，因為我們正在進行前端工作 ，因此這樣做可以節省時間。

相關：

• 如何在Chrome Developer Tools中將CSS樣式更改保存到ANGULAR 2.0組件？
• Angular-cli不使用--dev選項生成typescript文件
• 如何使用angular-cli webpack調試angular 2 app？ （在WebStorm中）
• SCSS SourceMap僅指向父選擇器。
  • github.com/angular/angular-cli問題＃2826

感謝您提供的任何建議。

Answer 1

當您鍵入ng服務時 ，默認情況下，角度cli不包含css文件的源映射文件，但您可以通過鍵入此命令來包含它

ng serve -sm -ec

要么

ng serve --sourcemap --extractCss

我使用Angular Cli -v 1.0.3，以及更多信息 - Angular CLI特例

Answer 2

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

您可以修改它們，但如果升級angular-cli，它將覆蓋您的文件。 所以一定要備份它們。

是的，它是用於內聯<style>標簽。 我同意這看起來很奇怪，應該在一個單獨的文件中，主要是因為它可以被用戶緩存並減少你的視圖塊大小。 可能是因為他們認為內聯是好的，因為當你處於開發模式時，你不希望它被緩存，這很好，但是在'ng build'上它應該被編譯為它自己的文件。

我知道你可以使用“extract-text-webpack-plugin”來配置webpack，但我不太熟悉它。

我希望看到angular-cli在構建時做到這一點，或者在配置中有一個選項。