如何在angular-cli項目中使用全局scss文件

Question

我是Angular 4和Angular-CLI的新手。 我找不到任何解決方案如何爲整個應用程序使用root scss/css文件。 因此，我的問題是，如何在項目中使用全局scss文件？

Answer 1

在src文件夾中創建一個styles文件夾，然後您可以將所有內容導入styles.scss，該文件夾也位於src文件夾中。這是我的樣子：

// Vendors 
@import './styles/vendors/_exports'; 

// Utils 
@import './styles/utils/_exports'; 

// Globals 
@import './styles/globals/_exports'; 

// Partials 
@import './styles/partials/_exports'; 

// Components 
@import './styles/components/_exports'; 

每個_exports文件導入的所有文件在特定的文件夾，使其更容易將其導入到styles.scss文件。

我希望這會有所幫助。

Answer 2

最簡單的方法是在根組件中加載scss文件，這樣所有的子組件都將獲得樣式。

而如果有許多文件，我們可以通過@import "scss-file";

導入這些SCSS文件到一個SCSS文件，如果孩子組件不希望使用這種風格，那麼我們也可以搞定通過encapsulation的component

另一種方式的屬性是：

stackoverflow.com/a/42865933/1876949

Answer 3

還有增加你的CSS/SCSS文件選項.angular-cli.json文件中的「樣式」數組。可能會有一個「最佳實踐」被這樣做破壞 - 我對規則並不確定。但是如果你在該數組中包含一個文件，它將被注入，就像它被加載到index.html的頂部一樣。

這裏是我的一個項目爲例：（/.angular-cli.json） ... 「風格」： 「styles.scss」， 」 ../node_modules/font-awesome /scss/font-awesome.scss 「 」 ../node_modules/mdi/scss/materialdesignicons.scss」 ]， ...