angular-cli和scss正在內嵌

我想我必須在這裏錯過一些非常簡單的東西。angular-cli和scss正在內嵌

全新安裝的angular-cli，用scss創建一個新網站。在全局style.scss中填寫scss，並在組件scss中填寫。

服務或建立這些CSS正在內聯。他們沒有被包括在內，這是我所期望或需要的。

的組件另級別SCSS不能引用全球style.scss變量（這也許是我期待別的什麼）

但我怎麼使用SCSS來產生一個外部CSS文件交付？

謝謝！保羅

來源

2017-04-25 paulinventome

使用'css.loader，style-loader'和'Extract-text-webpack-plugin'等裝載器作爲angular-cli內部使用的webpack。 – Jai

找到"styleExt": "css"成角cli.json與"styleExt": "scss" 替換，然後在「樣式」添加「styles.scss」：[]進入.angular-cli.json`

，如果你想在組件使用中使用scss styleUrls: ['app.component.scss']

爲全局變量創建一個variable.scss並導入其他所有scss文件。

來源

2017-04-25 11:15:46

嘗試這樣做：

"server:dev": "ng serve -e dev --port 9000 --progress --watch --open --ec=true",

添加 '--ec =真正的' 應該做的伎倆。否則，您可以彈出您的angular-cli應用程序，並手動配置您的webpack文件，方法是添加更多加載器。 https://github.com/angular/angular-cli/wiki/eject

來源

2017-04-25 14:12:15

我打算繼續努力。然而，我注意到如果應用程序捆綁分發，那麼樣式看起來似乎是在單獨的文件中服務，所以我假設這是本地服務在開發中的結果。 ec是什麼意思？謝謝！ – paulinventome

是的，做產品或AOT構建會提取樣式。如果您在dev中執行--ec = true或--extract-css，它將執行的操作是一樣的，那就是它將使用它們的sourceMaps將您的樣式提取到單獨的文件中。 PS。我們不應該在dev中提取-css，這會使構建veeeery變慢（但現在這是可用的解決方案。） https://github.com/angular/angular-cli/issues/4199 –

- 「同樣的事情，如果你做--ec = true或--extract -css在dev中，它會做什麼，它會將你的樣式與它們的sourceMaps一起抽取到單獨的文件中。」 - 不一定。請記住，--extract-css選項僅將全局css樣式提取到樣式表中，而不是組件級樣式。無論你在'.angular-cli.json'中'styles'數組中列出的是全局樣式。 – Meggg

angular-cli和scss正在內嵌

回答

相關問題