16

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?

Ronnie
  • 11,138
  • 21
  • 78
  • 140

6 Answers6

16

I fixed it by removing node sass all together.

npm uninstall node-sass

Austen Stone
  • 948
  • 1
  • 10
  • 21
4

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

Elena Kikiova
  • 101
  • 1
  • 7
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);
Ryan
  • 31
  • 1
  • This worked for me. I tried adding my similar code above to my root scss file. I will try to get it back into a partial through experimentation etc. – Dessus Nov 23 '21 at 19:04
0

First uninstall node-sass as mentioned in the other answers.

npm uninstall node-sass

You don't need to install sass separately, this should already be used internally in material.

Second, this might seem unrelated but it has worked for me. The .browserslistrc file needs to be using the new format. By default in Angular 12 this should be:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

The old format somehow causes node-sass to be still used so the @use statements end up failing.

The old format looks something like this for me:

enter image description here

There is discussed here: https://github.com/angular/angular-cli/issues/20967

Lastly, ensure the @use statements are placed before any @import statements (at the top of the file).

Yodacheese
  • 4,787
  • 5
  • 34
  • 42
0

After going through a lot of solutions this is what worked for me:

  1. uninstall node-sass: npm uninstall node-sass
  2. delete node-modules folder and package-lock.json file
  3. install sass: npm install --save-dev sass
  4. npm install
  5. npm start
Tejashri Patange
  • 329
  • 2
  • 6
  • 24
0

If you don't have node-sass on your package.json and package-lock.json, and you still are seeing this error or in the build you see the warning that node-sass is deprecated: Check if you're projects parent folder have the node_modules folder with node-sass.

That was my case, so I removed the node_modules because in my case the parent folder didn't need that folder, or remove node-sass from the parent folder npm project, depending on what you need.

aiglesiasn
  • 1