8

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.

G.T.
  • 562
  • 8
  • 18

3 Answers3

3

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;

Igor Kurkov
  • 4,318
  • 2
  • 30
  • 31
  • 1
    This is an important heads up that I had to fix. Running into issues with including mat-core(). Wondering if that has a different import location or was renamed? – Winnemucca Dec 22 '21 at 22:59
2

You can fixed it by removing node sass all together.

npm uninstall node-sass

God bless you ,

ArtixModernal
  • 661
  • 2
  • 8
  • 21
  • Not working unfortunately... I ran the command, but it doesn't help. I tried to reinstall node, clear cache, nothing seems to help. I still get the warning that I'm using node-sass when I run ng serve. – G.T. Jun 18 '21 at 20:47
1

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.

Hamada
  • 1,836
  • 3
  • 13
  • 27
  • Tried it, doesn't work. I even reinstalled node to be sure and still nothing. – G.T. Jun 18 '21 at 20:45
  • When I run `ng serve` I still get the node-sass warning, but I run the command... – G.T. Jun 18 '21 at 20:46
  • Try follow this steps [custom-theme-palettes-in-angular](https://stackoverflow.com/questions/41440998/how-can-i-use-custom-theme-palettes-in-angular) – Hamada Jun 18 '21 at 20:48
  • I get: ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: no mixin named mat-core on line 5 of src/styles.scss >> @include mat-core(); – G.T. Jun 18 '21 at 20:49
  • if I add the `@import '~@angular/material/theming';` on top of the auto generated file, I still get the same error: 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 11 of src/styles.scss >> @include mat.core(); – G.T. Jun 18 '21 at 20:53
  • Btw, I still just using the auto generated style file... which theoretically should work out of the box... Back in older versions I didn't had similar problems. – G.T. Jun 18 '21 at 20:54
  • [how-to-include-custom-material-themes](https://stackoverflow.com/questions/53007605/how-to-include-custom-material-themes-into-components-without-duplicating-mixins) and [guide_guide](https://material.angular.io/guide/guide) – Hamada Jun 18 '21 at 20:58
  • On the official guide I started with the getting started, it's not working out of the box... I tried the custom themes stuff, but it seems this line isn't working: `@use '~@angular/material' as mat;` – G.T. Jun 18 '21 at 21:00
  • [this can help](https://stackoverflow.com/questions/67652012/sasserror-cant-find-stylesheet-to-import-use-angular-material-as-mat) – Hamada Jun 18 '21 at 21:05
  • Still nope. This is really infuriating... Is this only on my PC? If you create a new project with latest versions it's working for you? – G.T. Jun 18 '21 at 21:14
  • for v12 no. Befor [see_stackblitz _demo](https://stackblitz.com/edit/angular-custom-theme-vyyqx3?file=src%2Fstyles.scss) – Hamada Jun 18 '21 at 21:21
  • 2
    Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233945/discussion-between-g-t-and-hamada). – G.T. Jun 18 '21 at 21:26