Sass error root stylesheet

Error: Can’t find stylesheet to import. #801

I have a sass file that imports a file from node_modules using the tilde prefix:

When I try and run this using renderSync I get the following error:

@cutting/component-library/src/styles/_index.scss’;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
Users/paulcowan/projects/cuttingedge/packages/website/src/assets/scss/_main.scss 3:9 @import
stdin 1:9 root stylesheet
at Object._newRenderError (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:10687:19)
at Object._wrapException (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:10537:16)
at StaticClosure._renderSync (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:10512:18)
at Object.Primitives_applyFunction (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:1055:30)
at Object.Function_apply (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:4882:16)

This works when I use the sass-loader and webpack to parse the files like this.

I am trying to fix a bug in typescript-plugin-css-modules which uses sass-dart and I would be interested to know if sass-dart supports tilde imports?

I have a failing test which you can reproduce like this:

The test file is here and the fixture it uses here

The text was updated successfully, but these errors were encountered:

Источник

Can’t find stylesheet to import: @use ‘

@angular/material’ as mat; #23889

Can’t find stylesheet to import: @use ‘

Using the latest Angular Material version (13.0.0) the first line of my theme.scss throws an error:

I’ve checked the next-versions : it was working with 13.0.0-next.7 and stopped working from 13.0.0-next.8 on.

The text was updated successfully, but these errors were encountered:

You should change the @use ‘

@angular/material’ to @use ‘@angular/material’ . We have an automated migration that should’ve cleaned it up for you. Did you update manually or through ng update ?

Wasn’t set automatically via ng update but works just fine! 👍

The current build literally warns a million times

Warning: > styles.39057a08ff4d2181.css:9051:0: warning: «@charset» must be the first rule in the file 9051 │ @charset «UTF-8»; while it only occurred once with the previous version. Is this normal?

I haven’t seen that warning before, but it seems like it’s coming from a Webpack loader, rather than Sass.

@angelaki From what version did you run ng update ? was your project already on a v13 next or RC release?

I updated through ng update from v12 and I also get the charset warning across everywhere when I run my prod build

Yeah, it was already — guess that’s the problem. Do you want me to simulate a clean update?

Not necessarily needed. We have an integration test that runs ng update for @angular/material and the CDK. It’s a known «issue» that ng update will not re-run migrations when your project is already on a next version.

The charset warnings are surprising and I’m unsure if this is something caused on our end? are there any signs that made you think this is caused by Angular Material? happy to look more into this.

Have the same issue after updated my angular cli with material. An issue as been raised here : angular/angular-cli#22097 and here : angular/angular-cli#22098
Hope that can bring some help !

Thanks @Kralone, let’s track this with the CLI. it seems like there is even an fix from the CLI side for that.

The charset issue is tracked with:

warning: «@charset» must be the first rule in the file angular-cli#22097 .

@devversion I have rerun the migration but it just nooped

@hheexx when you ran ng update , was your project already on a v13 next or RC release?

@devversion nope, latest patch od 12.x

that’s interesting. We have an integration test for this, so I’m surprised. The original poster of this issue was on a v13 next release already, so that explains this scenario.

If you have more details, a new issue would be appreciated. If others also run into this, and are not on v13 when running ng update, please also submit an issue.

it looks like we haven’t gotten any other reports so far. I will try to re-check the migration again in our docs app v12.

Just re-tested, the migration ran as expected on the material.angular.io v12 app:

/projects/material.angular.io (12.x) $ yarn start yarn run v1.22.11 $ ng serve ✔ Browser application bundle generation complete. «>

As said, if anybody faces an issue where ng update did not run properly (while your app was not on v13 already), please create another issue and we’ll do our best looking into it! Thanks!

If anybody else reports the problem I will create the issue. Thanks!

I had the same issue after migration from 12 to 13 ver:

Build at: 2021-11-07T06:12:19.257Z — Hash: 238020893e14045d — Time: 327ms

./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[
4].rules[0].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].rules[1].use[1]!./src/styles.scss — Error: Module build failed (
from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can’t find stylesheet to import.
╷
1 │ @use ‘

@angular/material’ as mat;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
srcassetstheme.scss 1:1 @import
srcstyles.scss 1:9 root stylesheet

./src/styles.scss — Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can’t find stylesheet to import.
╷
6 │ @use ‘ @angular/material’ as mat;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
srcassetstheme.scss 6:1 @import
srcstyles.scss 2:9 root stylesheet
at tryRunOrWebpackError (D:ProjectsSPnode_moduleswebpacklibHookWebpackError.js:88:9)
at webpack_require_module (D:ProjectsSPnode_moduleswebpacklibCompilation.js:4963:12)
at webpack_require (D:ProjectsSPnode_moduleswebpacklibCompilation.js:4920:18)
at D:ProjectsSPnode_moduleswebpacklibCompilation.js:4991:20
at symbolIterator (D:ProjectsSPnode_modulesneo-asyncasync.js:3485:9)
at done (D:ProjectsSPnode_modulesneo-asyncasync.js:3527:9)
at Hook.eval [as callAsync] (eval at create (D:ProjectsSPnode_modulestapablelibHookCodeFactory.js:33:10), :15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:ProjectsSPnode_modulestapablelibHook.js:18:14)
at D:ProjectsSPnode_moduleswebpacklibCompilation.js:4898:43
at symbolIterator (D:ProjectsSPnode_modulesneo-asyncasync.js:3482:9)
— inner error —
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can’t find stylesheet to import.
╷
6 │ @use ‘ @angular/material’ as mat;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
srcassetstheme.scss 6:1 @import
srcstyles.scss 2:9 root stylesheet
at Object. (D:ProjectsSPnode_modulescss-loaderdistcjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!D:ProjectsSPnode_modules@angular-devkitbuild-angularnode_modulespostcss-loaderdistcjs.js??ruleSet[1
].rules[4].rules[0].oneOf[1].use[2]!D:ProjectsSPnode_modulesresolve-url-loaderindex.js??ruleSet[1].rules[4].rules[1].use[0]!D:ProjectsSPnode_modulessass-loaderdistcjs.js??ruleSet[1].rules[4].rules[1].use[1]!D:ProjectsSP
srcstyles.scss:1:7)
at D:ProjectsSPnode_moduleswebpacklibjavascriptJavascriptModulesPlugin.js:432:11
at Hook.eval [as call] (eval at create (D:ProjectsSPnode_modulestapablelibHookCodeFactory.js:19:10), :7:1)
at Hook.CALL_DELEGATE [as _call] (D:ProjectsSPnode_modulestapablelibHook.js:14:14)
at D:ProjectsSPnode_moduleswebpacklibCompilation.js:4965:39
at tryRunOrWebpackError (D:ProjectsSPnode_moduleswebpacklibHookWebpackError.js:83:7)
at webpack_require_module (D:ProjectsSPnode_moduleswebpacklibCompilation.js:4963:12)
at webpack_require (D:ProjectsSPnode_moduleswebpacklibCompilation.js:4920:18)
at D:ProjectsSPnode_moduleswebpacklibCompilation.js:4991:20
at symbolIterator (D:ProjectsSPnode_modulesneo-asyncasync.js:3485:9)

Generated code for D:ProjectsSPnode_modulescss-loaderdistcjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!D:ProjectsSPnode_modules@angular-devkitbuild-angularnode_modulespostcss-loaderdistcjs.js??ruleSet[1].rules[
4].rules[0].oneOf[1].use[2]!D:ProjectsSPnode_modulesresolve-url-loaderindex.js??ruleSet[1].rules[4].rules[1].use[0]!D:ProjectsSPnode_modulessass-loaderdistcjs.js??ruleSet[1].rules[4].rules[1].use[1]!D:ProjectsSPsrcsty
les.scss
1 | throw new Error(«Module build failed (from ./node_modules/sass-loader/dist/cjs.js):nSassError: Can’t find stylesheet to import.n ╷n6 │ @use ‘

@angular/material’ as mat;rn │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^n ╵n srcas
setstheme.scss 6:1 @importn srcstyles.scss 2:9 root stylesheet»);

It was solved by deleting ‘

@angular/material’ as mat;
@use ‘@angular/material’ as mat;

Источник

Dart Sass Command-Line Interface

Usage permalink Usage

The Dart Sass executable can be invoked in one of two modes.

One-to-One Mode permalink One-to-One Mode

One-to-one mode compiles a single input file ( input.scss ) to a single output location ( output.css ). If no output location is passed, the compiled CSS is printed to the terminal.

The input file is parsed as SCSS if its extension is .scss , as the indented syntax if its extension is .sass , or as plain CSS if its extension is .css . If it doesn’t have one of these three extensions, or if it comes from standard input, it’s parsed as SCSS by default. This can be controlled with the —indented flag.

The special string — can be passed in place of the input file to tell Sass to read the input file from standard input. Sass will default to parsing it as SCSS unless the —indented flag is passed.

Many-to-many Mode permalink Many-to-many Mode

Many-to-many mode compiles one or more input files to one or more output files. The inputs are separated from the outputs with colons. It can also compile all Sass files in a directory to CSS files with the same names in another directory.

When compiling whole directories, Sass will ignore partial files whose names begin with _ . You can use partials to separate out your stylesheets without creating a bunch of unnecessary output files.

Options permalink Options

Input and Output permalink Input and Output

These options control how Sass loads its input files and how it produces output files.

–stdin permalink —stdin

This flag is an alternative way of telling Sass that it should read its input file from standard input. When it’s passed, no input file may be passed.

The —stdin flag may not be used with many-to-many mode.

–indented permalink —indented

This flag tells Sass to parse the input file as the indented syntax. If it’s used in many-to-many mode, all input files are parsed as the indented syntax, although files they use will have their syntax determined as usual. The inverse, —no-indented , can be used to force all input files to be parsed as SCSS instead.

The —indented flag is mostly useful when the input file is coming from standard input, so its syntax can’t be automatically determined.

–load-path permalink —load-path

This option (abbreviated -I ) adds an additional load path for Sass to look for stylesheets. It can be passed multiple times to provide multiple load paths. Earlier load paths will take precedence over later ones.

–style permalink —style

This option (abbreviated -s ) controls the output style of the resulting CSS. Dart Sass supports two output styles:

• expanded (the default) writes each selector and declaration on its own line.
• compressed removes as many extra characters as possible, and writes the entire stylesheet on a single line.

–no-charset permalink —no-charset

This flag tells Sass never to emit a @charset declaration or a UTF -8 byte-order mark. By default, or if —charset is passed, Sass will insert either a @charset declaration (in expanded output mode) or a byte-order mark (in compressed output mode) if the stylesheet contains any non- ASCII characters.

–error-css permalink —error-css

This flag tells Sass whether to emit a CSS file when an error occurs during compilation. This CSS file describes the error in a comment and in the content property of body::before , so that you can see the error message in the browser without needing to switch back to the terminal.

By default, error CSS is enabled if you’re compiling to at least one file on disk (as opposed to standard output). You can pass —error-css explicitly to enable it even when you’re compiling to standard out, or —no-error-css to disable it everywhere. When it’s disabled, the —update flag and —watch flag will delete CSS files instead when an error occurs.

–update permalink —update

If the —update flag is passed, Sass will only compile stylesheets whose dependencies have been modified more recently than the corresponding CSS file was generated. It will also print status messages when updating stylesheets.

Source Maps permalink Source Maps

Source maps are files that tell browsers or other tools that consume CSS how that CSS corresponds to the Sass files from which it was generated. They make it possible to see and even edit your Sass files in browsers. See instructions for using source maps in Chrome and Firefox.

Dart Sass generates source maps by default for every CSS file it emits.

–no-source-map permalink —no-source-map

If the —no-source-map flag is passed, Sass won’t generate any source maps. it cannot be passed along with other source map options.

–source-map-urls permalink —source-map-urls

This option controls how the source maps that Sass generates link back to the Sass files that contributed to the generated CSS. Dart Sass supports two types of URLs:

• relative (the default) uses relative URLs from the location of the source map file to the locations of the Sass source file.
• absolute uses the absolute file: URLs of the Sass source files. Note that absolute URLs will only work on the same computer that the CSS was compiled.

–embed-sources permalink —embed-sources

This flag tells Sass to embed the entire contents of the Sass files that contributed to the generated CSS in the source map. This may produce very large source maps, but it guarantees that the source will be available on any computer no matter how the CSS is served.

–embed-source-map permalink —embed-source-map

This flag tells Sass to embed the contents of the source map file in the generated CSS , rather than creating a separate file and linking to it from the CSS.

Other Options permalink Other Options

–watch permalink —watch

This flag (abbreviated -w ) acts like the —update flag, but after the first round compilation is done Sass stays open and continues compiling stylesheets whenever they or their dependencies change.

Sass watches only the directories that you pass as-is on the command line, parent directories of filenames you pass on the command line, and load paths. It does not watch additional directories based on a file’s @import / @use / @forward rules.

–poll permalink —poll

This flag, which may only be passed along with —watch , tells Sass to manually check for changes to the source files every so often instead of relying on the operating system to notify it when something changes. This may be necessary if you’re editing Sass on a remote drive where the operating system’s notification system doesn’t work.

–stop-on-error permalink —stop-on-error

This flag tells Sass to stop compiling immediately when an error is detected, rather than trying to compile other Sass files that may not contain errors. It’s mostly useful in many-to-many mode.

–interactive permalink —interactive

This flag (abbreviated -i ) tells Sass to run in interactive mode, where you can write SassScript expressions and see their results. Interactive mode also supports variables and @use rules.

–color permalink —color

This flag (abbreviated -c ) tells Sass to emit terminal colors, and the inverse —no-color tells it not to emit colors. By default, it will emit colors if it looks like it’s being run on a terminal that supports them.

–no-unicode permalink —no-unicode

This flag tells Sass only to emit ASCII characters to the terminal as part of error messages. By default, or if —unicode is passed, Sass will emit non- ASCII characters for these messages. This flag does not affect the CSS output.

–quiet permalink —quiet

This flag (abbreviated -q ) tells Sass not to emit any warnings when compiling. By default, Sass emits warnings when deprecated features are used or when the @warn rule is encountered. It also silences the @debug rule.

–quiet-deps permalink —quiet-deps

This flag tells Sass not to emit deprecation warnings that come from dependencies. It considers any file that’s transitively imported through a load path to be a “dependency”. This flag doesn’t affect the @warn rule or the @debug rule.

–trace permalink —trace

This flag tells Sass to print the full Dart or JavaScript stack trace when an error is encountered. It’s used by the Sass team for debugging errors.

–help permalink —help

This flag (abbreviated -h ) prints a summary of this documentation.

–version permalink —version

This flag prints the current version of Sass.

Источник

When writing mixins and functions that take arguments, you usually want to ensure that those arguments have the types and formats your API expects. If they aren’t, the user needs to be notified and your mixin/function needs to stop running.

Sass makes this easy with the @error rule, which is written @error <expression>. It prints the value of the expression (usually a string) along with a stack trace indicating how the current mixin or function was called. Once the error is printed, Sass stops compiling the stylesheet and tells whatever system is running it that an error occurred.

@mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }

  $left-value: if($property == right, initial, $value);
  $right-value: if($property == right, $value, initial);

  left: $left-value;
  right: $right-value;
  [dir=rtl] & {
    left: $right-value;
    right: $left-value;
  }
}

.sidebar {
  @include reflexive-position(top, 12px);
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.
}

@mixin reflexive-position($property, $value)
  @if $property != left and $property != right
    @error "Property #{$property} must be either left or right."


  $left-value: if($property == right, initial, $value)
  $right-value: if($property == right, $value, initial)

  left: $left-value
  right: $right-value
  [dir=rtl] &
    left: $right-value
    right: $left-value



.sidebar
  @include reflexive-position(top, 12px)
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.

The exact format of the error and stack trace varies from implementation to implementation, and can also depend on your build system. This is what it looks like in Dart Sass when run from the command line:

Error: "Property top must be either left or right."
  ╷
3 │     @error "Property #{$property} must be either left or right.";
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  example.scss 3:5   reflexive-position()
  example.scss 19:3  root stylesheet

Issue

I created an Angular project using the CLI. I’m using SCSS, and I included Angular Material with a custom theme iirc. I added a couple dummy components, and the app still built fine. Then I needed to style my components using Angular Material. In order to do so, I added @use '~@angular/material' as mat; to the first line of my style.scss file. Once I did this, the app will no longer build. It always throws the following error:

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @use '~@angular/material' as mat;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 1:1  root stylesheet

I have no idea what I’m doing wrong; I was under the impression that importing Angular Material this way would just work. Am I doing something wrong?

Here is my entire style.scss file if that’s helpful:

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

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// For each palette, you can optionally specify a default, lighter, and darker hue.
$aphrodite-primary: mat-palette($mat-indigo);
$aphrodite-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$aphrodite-warn: mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$aphrodite-theme: mat-light-theme((
  color: (
    primary: $aphrodite-primary,
    accent: $aphrodite-accent,
    warn: $aphrodite-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 angular-material-theme($aphrodite-theme);

/* You can add global styles to this file, and also import other style files */

@import '~normalize.css';
@import 'sassVars.scss';

html, body { height: 100%; }

html{
  background: $nullGray;
  min-width: 400px;
}

body {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background: $canvas;
  max-width: $bodyWidth;
  margin: auto;
  height: 100%;
  @include elevation(16);
}

Here’s my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "baseHref" : "/app/",
            "deployUrl": "/app/",
            "outputPath": "dist/myapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "myapp",
  "cli": {
    "analytics": "0ded4b78-d900-44ea-8ad2-b5cbba677e06"
  }
}

Solution

As usual with Google APIs, there is confusion between Angular Material version 11 and version 12.

[Short answer]

In SCSS, they seem to have deprecated use of @import favouring @use syntax. It seems Angular Material implemented this change somewhere around v11->12
(am also a newbie. This is my best guess).

Watch this YouTube video to get a general idea of the difference.

There is a reason why Google Angular is the most dreaded framework of 2020 on Stack Overflow
So it depends on the Angular Material version you are using

[Long answer]
In Angular Material v11, they seem to use @import syntax, and in v12 they seem to favour @use syntax.

Therefore, you seem to be trying to use a tutorial or theme designed with Angular Material v11 in mind which uses @import syntax and you mix it with @use syntax of Angular Material v12. The biggest difference between the two is that @use syntax causes the SCSS to be prefixed, so the function names change slightly, for example

//angular material v11 which uses @import syntax 
@import '~@angular/material/theming';//notice that the file imported is also different
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo); //notice that functions not Namespaced

$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

While the same example using angular material v12 which uses @use syntax

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

$candy-app-primary: mat.define-palette(mat.$indigo-palette, 500); //notice that functions are prefixed with Namespace mat. This is a feature of the scss @use  directive
$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

[I have yet to find a way to find the correct function names across the 2 versions. It is not trivial to migrate a theme manually especially when you are a newbie]

So you can see, its easy to have a missing stylesheet depending on if you are using Material v11 or 12. Good luck

Answered By — Dr Deo