角度4のカスタムテーマ

Question

MaterialのAngular4、@ Anger/Cli、カスタムテーマに問題があります。私はツイートのために何度も検索し、ドキュメントを読んで再読しましたが、何も動作しません。私はこれがいくつかの人々が尋ねたことのようですが、彼らの質問に対する答えは私のためには機能していないように見え、以前のバージョンの角と角のcliに対応しているようです。

私は動作するように予め作成されたテーマを得ることができますが、カスタムテーマを使用しようとすると何も起こりません。私がやっていないいくつかのステップが必要ですが、自分のカスタムテーマを含むscssファイルを自分のsrcフォルダに追加して、angle-cli.jsonのスタイルセクションにファイル名を追加するだけです。

さまざまな@import構文を試しましたが、インポートされていないようですか？仕事

@import '~@angular/material/theming' 

ないか、それが

@import '~@angular/material/_theming' 

あるいは

@import '~@angular/material/_theming.scss' 

すべきですか？

styles.cssファイルに別の@importが必要ですか？

私はうまくいかないチュートリアルを見つけることができず、ドキュメントは物事を残しているようです。多くの人が主張するように、カスタムテーマはちょうど壊れていますか？

Answer 1

は、あなたが何かに名前を付けることができ.scssファイルを作成します。このファイルでは、カスタムテーマを追加する必要があります。角度io（または角度4）が最初に@ angular/materialのモジュールから "theming"をインポートすることが重要であることに注意してください...スニペット/ファイルに含まれるものの例。 ここでは、その後、（あなたのメインのCSSファイルにスタイルをあなたのindex.html cssファイルを、それをインポートしたり、任意のとそれを持っていない場合は作成...そのファイル保存

@import '~@angular/material/theming'; 
@include mat-core(); 

$app-primary: mat-palette($mat-green, A400); 
$app-accent: mat-palette($mat-light-blue, A400); 
$app-warn: mat-palette($mat-red); 
$app-grey: mat-palette($mat-grey, A50); 


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

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

...行きます は、ここでは、最後に...再び

@import "path/to/your/theme_file.scss"; 

を行く...キーの下にあなたの.angular-cli.json」で

、SASSするコンパイルされますよう.scssであることが不可欠である）のようなので、

カスタムテーマファイルのパスをそのキーの値の1つとして追加します。あなたのおかげさま...しかし、忘れないでください。@ angle/materialモジュールを使用する場合は、モジュールからすべてのコンポーネントをapp.moduleにインポートする必要があります。プロジェクトでもそれらを使用するために、TSは...そう

imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
BrowserAnimationsModule, 
MaterialModule, 
MdInputModule, 
MdDialogModule, 
MdRadioModule, 
MdDatepickerModule, 
MdMenuModule, 
MdToolbarModule, 
MdIconModule, 
MdProgressSpinnerModule 

]

などの輸入キーに

import { MaterialModule, MdDialogModule, MdInputModule, MdRadioModule, MdDatepickerModule, MdMenuModule, MdToolbarModule, MdIconModule, MdProgressSpinnerModule } from '@angular/material'; 

、次に言う、これはあなたの問題に役立ちます願っています。

Answer 2

これが私の仕事です：

@import "../node_modules/@angular/material/_theming.scss"。

私もここの指示に従っ：

Angular 2 Material Custom Themes