Angular Material 12 Custom Theme

user_2810000 0
Viewed 2984

In a new angular project if I add Angular Material with custom theme I get the following error:

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mat": expected 1 selector or at-rule, was ".core();"
        on line 2 of src/styles.scss
>> @include mat.core();

I'm using

Angular CLI: 12.0.5
Node: 14.17.1
Package Manager: npm 7.18.1
OS: win32 x64

Angular: 12.0.5

Any idea what might be causing this error? If I try to ctrl+click @use '~@angular/material' as mat; it won't take me anywhere.

Ways to reproduce:

  • ng new project
  • cd project
  • ng add @angular/material <- select sass and custom theme
  • ng serve

I tried to run npm uninstall node-sass, but doesn't seem to help. When I run ng serve I still get the node-sass warning and I get the same exact message.

I tried to use @import '~@angular/material/theming'; still same error.

angular-material angular
3 Answers

In angular 13 try to use @use '@angular/material' as mat; without tilda symbol ~ in path,

so NOT ~@use '@angular/material' as mat;

but @use '@angular/material' as mat;

user_90261030

The mat-core mixin is responsible for adding styles for elevation, ripple, overlay, etc that are not theme dependent.

It has already been included in the prebuilt theme files before being compiled to CSS, so that's why you it's not available to you in your current styles.scss. If you chose to build a custom theme instead of using the prebuilt indigo-pink theme, then you would need to include it.

user_123368820

You can fixed it by removing node sass all together.

npm uninstall node-sass

God bless you ,

user_106645410
Related