SassError: Can't find stylesheet to import. @use '~@angular/material' as mat;
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"
}
}
For Angular 13 try to remove tilde symbol (~) from the path so import like:
@use '@angular/material' as mat;
It works like a charm.
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
Apparently, I had been reading the wrong documentation for my version. The above code has two things that needed to be changed for it to work for me.
-
You don't do
@use '~@angular/material' as mat;. The important line is@import '~@angular/material/theming';, which was already put in the file by the CLI. -
It's not
@include elevation(16);, it's@include mat-elevation(16);.