web-dev-qa-db-ja.com

Angular Material-'@ angular / material / theming'を解決できません

私は 公式ガイド に従い、次の内容のapp-theme.scssを作成しました：

@import '~@angular/material/theming';    
@include mat-core();    
$candy-app-primary: mat-palette($mat-Indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);    
$candy-app-warn:    mat-palette($mat-red);    
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);    
@include angular-material-theme($candy-app-theme);

styles.cssの内容：

@import './app-theme.scss';

ただし、コンパイル中に常に次のエラーが発生します：Module not found: Error: Can't resolve '@angular/material/theming'。機能させるにはどうすればよいですか？

angularsassangular-material2
13
nkxandroid

解決済み：

Angular Material 2のドキュメントでは、デフォルトでsassスタイルシートを使用していることを前提としています。これは明確に伝えられたり説明されたりすることはありません。以下の手順を使用してこの問題を解決できます。

  1. styles.cssの名前をstyles.scssに変更し、その内容を@import './app-theme';に設定します
  2. angular-cli.jsonで、styles: ["styles.css"]をstyles: ["styles.scss"]に変更します
  3. Npmを再起動します
17
nkxandroid

Angular 6または7-すべてを1つのコマンドで取得

Angular 6 or 7では、単にangular-materialをインストールするだけです

ng add @angular/material

このコマンドは何をしますか？ここをよく見て

  1. インストールangular material、cdk、animations
  2. app.module.tsへの参照を追加します
  3. material-icons'へのindex.html参照の追加
  4. 選択したテーマを選択するように求められ、package.jsonへの参照が追加されます（テーマが機能しない場合は、下記のようにstyles.css/styles.scssにインポートしてください）。

以前のバージョンでは、これらの手順を手動で行っていました

角度5

Angular5+を使用すると、1つまたは両方のimportメソッドが機能します

@import "@angular/material/prebuilt-themes/Indigo-pink.css";

@import "~@angular/material/prebuilt-themes/Indigo-pink.css"; // in official docs
6
WasiF

これを試して、

  1. テーマファイル名を_app-theme.scssに変更します

  2. Styles.cssをstyles.scssに変更します

  3. 次のように、テーマをstyles.scssファイルにインポートします。

@import './path/to/your/theme/app-theme'; //ここではアンダースコアとファイル拡張子は必要ありません

  1. Angular-cli.jsonのスタイルにテーマファイルを含める必要はありません：[]
4
Faisal

このプロジェクトにangularマテリアルをインストールしたことを確認しますか？node_modulesフォルダーなしでWebページのコンテンツのみをコピーでき、その場合コンパイラーがパスを見つけることができません ' node_modules/@ angular/material/theming '。

このコマンドを試してみてください。

npm install --save @angular/material @angular/cdk

それは役立つかもしれません。

1
Kolman Robert

提供した公式ガイドによると、テーマファイルをstyles.cssファイルにインポートするのではなく、angular-cli.jsonファイルのstyles配列に挿入する必要があります。これは次のようになります。

styles: [
  "app-theme.scss",
  "styles.css"
]
0
Emerson Jair