Angular Material - Can't resolve '@angular/material/theming'

问题

I have followed the official guide and created a app-theme.scss with the following content:

@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);

Content of styles.css:

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

However, I always get the following error during compilation: Module not found: Error: Can't resolve '@angular/material/theming'. What must I do to make it work?

回答1:

Solved:

The Angular Material 2 documentation assumes you are using sass style-sheets by default. This is never clearly communicated or explained. The steps listed below can be used to resolve this issue.

Rename styles.css to styles.scss and set its content to @import './app-theme';
In angular-cli.json, change styles: ["styles.css"] to styles: ["styles.scss"]
Restart npm

回答2:

Angular 6+ --- Get all in one command

In Angular 6+, you simply need to install angular-material like

ng add @angular/material

What this command does? well see here

Installs angular material, cdk, animations
Adds references to the app.module.ts
Adds material-icons' reference to the index.html
It asks you to select the theme of your choice and adds reference to the angular.json (if theme does not work, import it in styles.css/styles.scss as described below)

but in previous versions, you were doing these steps manually

Angular 5

Using Angular5+, one or both import methods will work for you

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

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

回答3:

Try this,

Change your theme file name to _app-theme.scss
Change your styles.css to styles.scss
Import your theme into the styles.scss file like:

@import './path/to/your/theme/app-theme'; // You dont need the underscore and file extention here

You dont need to include your theme file in angular-cli.json styles: []

回答4:

Are you sure, that you have installed angular materials in this project ? Sometimes you can copy only the content of web page, but without node_modules folder and in that case compiler can't find the path 'node_modules/@angular/material/theming'.

Just try this command and you will see.

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

It could help.

回答5:

According to the official guide you provided, you should not be importing your theme file into your styles.css file, instead, you should put it into the styles array of your angular-cli.json file, it should be something close to this:

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

回答6:

Check this path ERROR in ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css while you install any other module or library. In my case I installed Angular Syncfusion scheduler
A new import statement gets added in the above path so what you have to do is just cut paste that import statement in style.css because it should it generally be there
And while doing this process, the Angular material folder or Angular Syncfusion folder may also get deleted from node_modules, so make sure you type the command npm install so that npm can install all the dependencies mentioned in package.json

来源：https://stackoverflow.com/questions/45524827/angular-material-cant-resolve-angular-material-theming

标签

angular

Sass

angular-material2