10

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?

                      
improve this question                            
edited Aug 5 '17 at 18:54                                
                                   
                                
Nehal                                    
9,0652 gold badges29 silver badges45 bronze badges                                    
asked Aug 5 '17 at 17:46                                
                                   
                                
  • Which version of angular material are you using? – Faisal Aug 5 '17 at 19:15                                
  • 1                                
    @Faisal @angular/material@2.0.0-beta.8 – nkxandroid Aug 6 '17 at 9:09                                
       

5 Answers 正确答案


       
19

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.

  1. Rename styles.css to styles.scss and set its content to @import './app-theme';

  2. In angular-cli.json (或者 angular.json), change 

    应该有两处吧  styles: ["styles.css"] to styles: ["styles.scss"]

  3. Restart npm (即 npm run start )  ( 或者 ng serve 吧 )

improve this answer                            
edited May 10 '18 at 8:34                                
                                   
                                
DigiBanks99                                    
415 bronze badges                                    
answered Aug 6 '17 at 9:18                                
                                   
                                
  • restart 'npm' mean 'ng serve' or something else? – WasiF Jan 18 '18 at 6:25                                    
  • 3                                    
    Any change in angular-cli.json require stop and start the service. For me the best and clean solution is only add the custom.scss entry in styles list and avoid to try to import inside styles.css. – chavocarlosMar 29 '18 at 2:55                                    
       
6

Angular 6 or 7 - Get all in one command

in Angular 6 or 7, you simply need to install angular-material like

ng add @angular/material
                       

What this command does? well see here

  1. Installs angular material, cdk, animations

  2. Adds references to the app.module.ts

  3. Adds material-icons' reference to the index.html

  4. It asks you to select the theme of your choice and adds reference to the package.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