Angular-Cli - scssを構造化するには？

Question

私はAngular-Cliでしたいと思うようにスタイルを動かすことに非常に不満を抱いています。私はあなたがそれをどのように構造化すると予想されているのか分かりません。

これは、私はアプリ全体を通して必要なすべてのファイルをインポートしている私のmain.scssファイル内

- styles 
-- components 
--- buttons.scss 
-- partials 
--- mixins.scss 
--- variables.scss 
-- main.scss 
-- styles.scss (default file) 

私のスタイルフォルダです。

@import './components/buttons.scss'; 
@import './partials/variables.scss'; 
@import './partials/mixins.scss'; 

と私のapp.component.tsで、

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.html', 
    styleUrls: [ '../styles/main.scss' ], 
}) 

私はアプリをロードする際にすべてが動作します。すばらしいです！ 次に、新しいコンポーネントheader.component.tsを追加し、header.scssを自分のスタイルフォルダに追加します。 header.component.tsで

-styles 
-- header 
--- header.scss 

Iは、スタイルシートを設定

@Component({ 
     selector: 'app-header', 
     templateUrl: './header.html', 
     styleUrls: [ '../styles/header/header.scss' ], 
    }) 

私はapp.html内部このヘッダを使用します。 header.scssが/partials/variables.scssの変数を参照したため

<div> 
<app-header></app-header> 
</div> 

は今私のブラウザが不足している変数に対するエラーのすべての種類を投げています。

ただし、variables.scssがインポートされ、main.scssがロードされていません。header.component.tsがロードされるまでに既に読み込まれていますか？私はそれがどのように動作するのか理解していない！

私がやりたいことは、最初にvariables.scss, mixins.scss, buttons.scssをロードし、変数とミックスインを使用することができます。それ、どうやったら出来るの？

編集： すべてのコンポーネントにvariables.scss, mixins.scss, buttons.scssをインポートする必要がありますか？

Answer 1

コンポーネントでvariables.scss、mixins.scss、buttons.scssをインポートする必要がありますか？

はい、あなたはheader.scss の例の変数のために使用しかし、あなたは、例えば2回のクラスをインポートするとき、それは2を追加しているため、クラスで定義されたスタイルをインポートする意識になりたいときにそれらをインポートする必要がありますあなたの出力スタイル回..

チェックこの問題：あなたはsillentクラスhttps://csswizardry.com/2014/01/extending-silent-classes-in-sass/を使用できるクラスを拡張するためのhttps://github.com/sass/sass/issues/1094