プロジェクトのスタイルシートでプライマリカラーを取得する

Question

角度のある素材のテーマで使用される主な色を、角度のあるプロジェクトのCSSファイルに取り込む方法はありますか？プロジェクトで

、我々はこのような* .scssファイルに原色を定義することができます。

@import '~@angular/material/theming'; 

@include mat-core(); 

$primary: mat-palette($mat-green, 800); 
$accent: mat-palette($mat-teal, 600, A100, A400); 
$warn: mat-palette($mat-red, 600); 

$theme: mat-light-theme($primary, $accent, $warn); 

@include angular-material-theme($theme); 

を私は私のコンポーネントで* .scssファイルを使用しようとしましたが、$primary変数が認識できた。

//*.scss file 
//... 
.myclass { 
    background: $primary; //This line compiles with the error 'Undefined variable: "$primary".' 

} 

Answer 1

この変数を使用するには、まず変数を定義する必要があります。どこで定義され、最終的に変更されたか（フレームワークには何らかの設定や類似があることが多い）に応じて、@importが必要です。

しかし、通常scssの使用方法は、1つのメインファイル（name.scss）と複数のインポートファイル（_name.scss）を持つことです。それは単一のcssファイルにコンパイルされます。これらのルールを拡張する方法は、そのメインファイルの末尾（またはマークされたポイント）にそれらを追加することです。別の "メイン"ファイル（したがってcssファイル）を作成すると、cssが重複する可能性があります。そうでなくても、それは実用的ではありません。

mat-color($theme)