Error in Angular Material: SassError - The CSS after "@include mat" is invalid. Expected 1 selector or at-rule, but found ".core();"

My Angular 11 project was running smoothly with Angular Material version 11 until I decided to update everything to Angular 12, including Material. However, after the update, the styles.scss file that comes with Material started throwing errors. The complete error message is as follows:

./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 specific code causing the issue is shown below:


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

@include mat.core(); // <--- This is where it's 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 checked various forums but haven't found a solution yet. Some suggestions included running npm rebuild node-sass, which did not work. I also tried npm install node-sass, but that didn't fix the problem either. Any thoughts?

angulartypescriptangular-material

Answer №1

The issue was resolved after completely removing node sass from the project.

npm uninstall node-sass

Answer №2

As of 2021, node-sass is no longer supported. I encountered a similar problem to the one mentioned in the query, and this solution from provided the assistance I needed.

Answer №3

To resolve the issue, I decided to install npm sass, although it may not have been completely necessary.

In addition, I found that moving the specified code from my /styles/_theme.scss file to directly inside my styles.scss file was crucial. It appears that there is a compatibility issue with using @include mat.core() in partial scss files (files prefixed 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);

Answer №4

To begin, start by removing node-sass according to the instructions provided in previous responses.

npm uninstall node-sass

You do not have to separately install sass since it is typically already integrated within material.

Next, while this may seem unrelated, I found success with this method. The .browserslistrc file should adhere to the new format. In Angular 12, the default configuration should be as follows:

# This file is essential for CSS and JS output customization to support specified browser versions below.
# Refer to the following link for more information on format and rule options:
# https://github.com/browserslist/browserslist#queries

# View Angular framework's supported browsers list here:
# https://angular.io/guide/browser-support

# To view browsers selected based on your queries, run this command:
#   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 upon explicit opt-in. Remove 'not' prefix from this line to opt-in.

The outdated format tends to cause continued use of node-sass leading to failure of @use statements.

In my case, the old format resembled something like this:

https://i.sstatic.net/Ukyqj.png

This issue has been addressed here: https://github.com/angular/angular-cli/issues/20967

Lastly, ensure that @use statements precede any @import statements (positioned at the beginning of the file).

Answer №5

After trying various solutions, I finally found the one that solved my problem:

  1. Start by removing node-sass: npm uninstall node-sass
  2. Delete the node-modules directory and package-lock.json file
  3. Next, install sass: npm install --save-dev sass
  4. Run npm install
  5. Finally, start your project using npm start

Answer №6

If you encounter the error or warning about node-sass being deprecated but do not have it listed in your package.json or package-lock.json files, check if the 'node_modules' folder with node-sass exists in your project's parent directory.

In my situation, I found that the parent folder did not require the 'node_modules' folder, so I removed it. Alternatively, you can remove node-sass from the parent folder's npm project if it is unnecessary for your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do other effects promptly process actions dispatched by one ngrx Effects effect?

I am facing an issue in my Angular (2) application where I have implemented four ngrx actions: START This action is not processed by the reducer, meaning there is no state change The ngrx Effect triggers an asynchronous task and maps it to either SUCCE ...

angularngrxngrx-effects

Having trouble determining the reason why the routing isn't functioning properly

Currently on a journey to grasp the ins and outs of angular2. After diving into tutorials and doing some research, I've made the decision to build a working demo incorporating all common features. I am currently struggling with implementing routing b ...

angular

The orderBy filter seems to be malfunctioning

I'm utilizing ngx-pipes from this webpage: https://www.npmjs.com/package/ngx-pipes#orderby Specifically, I am using the orderBy pipe. However, when I implement the orderBy pipe in my HTML, the information is not being ordered correctly (from minor t ...

htmlangulartypescriptpipeionic4

What is the best way to implement switchMap when dealing with a login form submission?

Is there a better way to prevent multiple submissions of a login form using the switchMap operator? I've attempted to utilize subjects without success. Below is my current code. import { Subject } from 'rxjs'; import { Component, Output } ...

javascriptangulartypescriptrxjs

Typescript: Creating an interface for a nested object "with a required key"

The objective is to prevent developers from declaring or accessing fields that the object does not possess. This also involves accurately defining a deeply nested object or schema. const theme: iTheme = { palletes: { primary: { main: "white", ...

reactjstypescript

Exploring the World of Angular6 with the Incredible Power of tinyMCE Editor

Hello, I'm looking to incorporate the tinyMCE editor into my Angular 6 application. I followed a thread that explains how to integrate it, but I ran into an issue where it says the domain is not registered. I would prefer to do this without requiring ...

angular

Obtaining the value of SCOPE_IDENTITY to be used in an Angular application

Having trouble getting the ID of the newly inserted table row to use in my Angular application. Any suggestions on how to pass it while posting? Can't quite figure it out. public string Post(Profile profile) { try { string ...

sqlasp.netangular

How can you extract the property names of the first object in an array of objects?

I have an array of objects with the following structure and I want to extract the property names of the first object from this array without including the values. The desired result should only be ["Name", "Account", "Status"] ...

javascripttypescript

How to retrieve the current route name or URL in AngularDart5

Exploring the OnActivate feature in Angular docs, I am attempting to utilize it to dynamically update the UI based on the current route. @Component( selector: "blah", template: """blah""", directives: const [routerDirectives]) class Blah ext ...

angulardartangular-ui-routerangular-dart

What is the reasoning behind ethers.js choosing to have the return value of a function be an array that contains the value, rather than just the value itself

An issue arose with the test case below: it('should access MAX_COUNT', async () => { const maxCount = await myContract.functions.MAX_COUNT(); expect(maxCount).to.equal(64); }); The test failed with this error message: ...

typescriptsolidityethers.jshardhatrootstock

What is the best way to convert a recordset to an array using React?

I'm attempting to create an array by retrieving data from a SQL recordset: +------------+------------+------------+ | start_type | field_name | start_text | +------------+------------+------------+ | 0 | Field1 | some text. | +----------- ...

javascriptreactjstypescript

What is the reason behind a TypeScript compiler error being triggered by an 'if-else' statement, while a ternary operator construct that appears identical does not raise any errors?

My function is designed to either return a value of IDBValidKey or something that has been converted to IDBValidKey. When I use the ternary operator to write the function, it works fine. However, if I try to write it as an if-else statement, it causes a co ...

typescripttypescript-generics

Show information in a Tree structure using Angular

Is there a way in Angular to display people data in a tree structure with a filter based on the "area" field? If so, how can this be achieved? Here is an example of the data structure: public rowData = [ { area : 'Area A', Persons: [ { pe ...

angular

Tips for type guarding in TypeScript when using instanceof, which only works with classes

Looking for a way to type guard with TypeScript types without using instanceof: type Letter = 'A' | 'B'; const isLetter = (c: any): c is Letter => c instanceof Letter; // Error: 'Letter' only refers to a type, but is being ...

typescriptfiltertypescastingtypeguards

What is the best way to update the color of a label in a Mantine component?

When using the Mantine library, defining a checkbox is done like this: <Checkbox value="react" label="React"/> While it's possible to change the color of the checkbox itself, figuring out how to change the color of the label ...

javascriptreactjstypescriptnext.jsmantine

React-table fails to show newly updated data

I am facing an issue with my react-table where real-time notifications received from an event-source are not being reflected in the table after data refresh. https://i.stack.imgur.com/q4vLL.png The first screenshot shows the initial data retrieval from th ...

reactjstypescriptnext.jsreact-table

Leverage the useRef hook with React Draggable functionality

Having recently delved into coding, I find myself navigating the world of Typescript and React for the first time. My current challenge involves creating a draggable modal in React that adjusts its boundaries upon window resize to ensure it always stays wi ...

reactjstypescriptdraggableuse-ref

Troubleshooting issue with React and Material UI Table pagination display

Issue with Material UI Table Display When Changing Pages When receiving an array of Artist Objects through props to create a checklist table, I encounter some display issues. The table works fine initially, but when changing pages or sorting, more rows th ...

reactjstypescriptmaterial-uireact-dom

Organize information in a React table following a predetermined sequence, not based on alphabetical order

As a beginner with React, I'm looking to sort my data by the column "Status" in a specific order (B, A, C) and vice versa, not alphabetically. The data structure looks like this: export interface Delivery { id: number; name: string; amount: num ...

javascriptreactjstypescripthtml-table

When conducting a test, it was found that the JSX element labeled as 'AddIcon' does not possess any construct or call signatures

Here is a code snippet I'm currently working with: const tableIcons: Icons = { Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />), Check: forwardRef((props, ref) => <Check {...props} ref={ref} />) }; const AddIcon ...

reactjstypescriptreact-testing-library