我使用 CLI 创建了一个 Angular 项目。我正在使用 SCSS,并且我将 Angular Material 包含在自定义主题 iirc 中。我添加了几个虚拟组件,应用程序仍然构建得很好。然后我需要使用 Angular Material 来设计我的组件的样式。为此,我将
@use '~@angular/material' as mat;
添加到 style.scss
文件的第一行。一旦我这样做了,该应用程序将不再构建。它总是抛出以下错误:
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 就可以了。我是不是做错了什么?
这是我的整个
style.scss
文件(如果有帮助的话):
@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"
}
}
对于 Angular 13,尝试从路径中删除波浪号 (
~
),因此导入如下:
@use '@angular/material' as mat;
它就像一个魅力。
与 Google API 一样,Angular Material 版本 11 和版本 12 之间存在混淆。
[简答]
在 SCSS 中,他们似乎不推荐使用
@import
,而倾向于使用 @use
语法。 Angular Material 似乎在 v11->12 左右实施了此更改观看此 YouTube 视频,大致了解其中的差异。
Google Angular 成为 Stack Overflow 上 2020 年最可怕的框架是有原因的 :) 所以这取决于您使用的 Angular Material 版本
[长答案]
在 Angular Material v11 中,他们似乎使用
@import
语法,而在 v12 中,他们似乎更喜欢 @use
语法。
因此,您似乎正在尝试使用根据 Angular Material v11 设计的教程或主题,其中使用
@import
语法,并将其与 Angular Material v12 的 @use
语法混合。两者最大的区别在于 @use
语法导致 SCSS 带有前缀,因此函数名称略有变化,例如
//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);
虽然使用 Angular Material v12 的同一示例使用
@use
语法
@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);
[我还没有找到一种方法来在两个版本中找到正确的函数名称。手动迁移主题并不简单,尤其是当您是新手时]
我遇到了类似的问题,@darko99 帮助我发表了评论。如果我将
@use '@angular/material' as mat;
更改为 @use 'node_modules/@angular/material' as mat;
我将停止在终端中收到 SassError 。但是,除了在每个@use上添加node_modules/
之外,我们还可以在architect/build/options下的angular.json
中添加以下内容:
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/",
...
]
}
显然,我一直在阅读适合我的版本的错误文档。上面的代码有两件事需要更改才能为我工作。
你不做
@use '~@angular/material' as mat;
。重要的行是 @import '~@angular/material/theming';
,它已由 CLI 放入文件中。
不是
@include elevation(16);
,是@include mat-elevation(16);
。
试试这个方法:
@use '@angular/material' as mat;
没有 ~ 符号。
希望它对你有用
@使用“node_modules/@angular/material”作为垫子;
上面的代码对我有用。 Node 版本是
14.16.0
,Angular 12.x
,IDE 是 Visual Studio。
如果有人再次遇到此错误,以下内容对我有帮助:
我遇到了同样的问题,我删除了自定义角度主题,忘记从
angular.json
文件中删除路径样式,然后将 @use '~@angular/material' as mat;
更改为 @use '@angular/material' as mat;
。
在删除客户的样式路径后,我更新了角度材料。然后只需重置您使用的 VSCode,因为它有时不会自行刷新。
弹出答案: npm install @costlydeveloper/ngx-awesome-popup
@import“@costlydeveloper/ngx-awesome-popup/styles/主题”;
工作 stle.scss