Angular-CLIプロジェクトでグローバルscssファイルを使用する方法

Question

Angular-4とAngular-CLIを初めて使用しました。 アプリケーション全体でroot scss/cssファイルを使用する方法を見つけることができません。 それで、私の質問、どのようにプロジェクトでグローバルscssファイルを使用するには？

Answer 1

srcフォルダにstylesフォルダを作成し、srcフォルダにあるstyles.scssにすべてをインポートできます。

// 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";

を使用して、1つのSCSSファイルにそれらのSCSSファイルをインポートすることができ、子どもたちのコンポーネントはそのスタイルを使用したくない場合は、その後、我々はまた、encapsulationを経由してそれを処理することができます

stackoverflow.com/a/42865933/1876949

Answer 3

にあなたのCSS/SCSSファイルを追加するオプションもあります：component

もう一つの方法は、にされてのプロパティ.angular-cli.jsonファイルの "styles"配列。これを行うことによって壊れてしまう「ベストプラクティス」があるかもしれません - 私はルールについてはあまりよく分かりません。しかし、その配列にファイルを含めると、index.htmlの先頭に読み込まれたように挿入されます。ここで

は私のプロジェクトの一つの例である：（/.angular-cli.json） ... "スタイル"：[ "styles.scss"、 」../node_modules/font-awesome /scss/font-awesome.scss " " ../node_modules/mdi/scss/materialdesignicons.scss」 ]、 ...