Angular material: SassError: Invalid CSS after "@include mat": expected 1 selector or at-rule, was ".core();"

Question

I had an angular 11 project working for a while with angular material (also 11). I just updated everything to angular 12 (including material). The styles.scss that is included with material is now failing after the update. The entire error is:

./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 11 of src/styles.scss
>> @include mat.core();

   ---------^

    at processResult (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/webpack/lib/NormalModule.js:676:19)
    at /Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/webpack/lib/NormalModule.js:778:5
    at /Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.callback (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/sass-loader/dist/index.js:54:7)
    at Object.done [as callback] (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/neo-async/async.js:8069:18)
    at options.error (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/node-sass/lib/index.js:293:32)

./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss - Error: 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();

   ---------^

The code in question that is failing is:

@import '~@angular/material/theming';
@use '~@angular/material' as mat;

@include mat.core(); // <--- Here is where it is failing.

$finder-primary: mat.define-palette(mat.$indigo-palette);
$finder-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$finder-warn: mat.define-palette(mat.$red-palette);

$finder-theme: mat.define-light-theme((
  color: (
    primary: $finder-primary,
    accent: $finder-accent,
    warn: $finder-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($finder-theme);

I've searched their issue queue and cant seem to find anything. I saw a couple suggestions to run npm rebuild node-sass. That didn't work. I also did an npm install node-sass and that didn't work. Any ideas?

Answer 1

I fixed it by removing node sass all together.

npm uninstall node-sass

Answer 2

node-sass is deprecated in 2021. I had the same issue as in the question and this answer: https://stackoverflow.com/a/68327656/12532248 helped me

Answer 3

I fixed this issue by installing npm sass (this might not have been required).

I also had to move the following code out of my /styles/_theme.scss and place it directly into my styles.scss. Seems there is an issue with @include mat.core() in partial scss files (files that start with _).

@use '~@angular/material' as mat;
@import '~@angular/material/theming';
@include mat.core();

$app-primary: mat.define-palette(mat.$indigo-palette);
$app-accent: mat.define-palette(mat.$indigo-palette);

$app-warn: mat.define-palette(mat.$red-palette, 900);

$app-theme: mat.define-light-theme($app-primary, $app-accent, $app-warn);

@include mat.all-component-themes($app-theme);

$sansserif-typography: mat.define-typography-config(
  $font-family: sans-serif
);
@include mat.all-component-typographies($sansserif-typography);