Angular Material 12 Custom Theme

Question

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.

Answer 1

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;