问题描述
我使用 CLI 创建了一个 Angular 项目.我正在使用 SCSS，并且我在自定义主题 iirc 中包含了 Angular Material.我添加了几个虚拟组件，该应用程序仍然构建得很好.然后我需要使用 Angular Material 来设计我的组件.为此，我将 @use '~@angular/material' as mat; 添加到我的 style.scss 文件的第一行.一旦我这样做了，应用程序将不再构建.它总是抛出以下错误:
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
我不知道我做错了什么；我的印象是，以这种方式导入 Angular Material 会奏效.我做错了什么吗?
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?
如果有帮助，这里是我的整个 style.scss 文件:
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);
}
这是我的 angular.json 文件:
{
"$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"
}
}
推荐答案
显然，我一直在为我的版本阅读错误的文档.上面的代码有两件事需要更改才能对我有用.
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.
你不会
@use '~@angular/material' 作为 mat;.重要的一行是@import '~@angular/material/theming';，它已经被 CLI 放入文件中.
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.
不是@include height(16);，而是@include mat-elevation(16);.
这篇关于SassError:找不到要导入的样式表.@use '~@angular/material' 作为垫子；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！