SassError：找不到要导入的样式表。 @use '~@angular/material' 作为垫子；

Posted 2023-02-18

【中文标题】SassError：找不到要导入的样式表。 @use \'~@angular/material\' 作为垫子；

【英文标题】：SassError: Can't find stylesheet to import. @use '~@angular/material' as mat;SassError：找不到要导入的样式表。 @use '~@angular/material' 作为垫子；

【发布时间】：2021-08-11 13:47:49

【问题描述】：

我使用 CLI 创建了一个 Angular 项目。我正在使用 SCSS，并在自定义主题 iirc 中包含了 Angular Material。我添加了几个虚拟组件，应用程序仍然构建良好。然后我需要使用 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"
  

【参考方案1】：

对于 Angular 13，请尝试从路径中删除波浪符号 (~)，以便像 @use '@angular/material' as mat; 一样导入。

它就像一个魅力

【讨论】：

这个适用于ng13

感谢您的反馈。它对我有用！

我发现github.com/angular/components/issues/23889 提供了一些背景信息。我还成功运行了ng update @angular/cdk --migrate-only --from 12.0.0 --to 13.0.0，它修复了我的材料 scss 导入。我想我不是唯一一个正常 ng 更新中断的人

它工作但 phpStorm 不喜欢它，所以我使用 @use 'node_modules/@angular/material' as mat; 根据 jetbrains 问题 WEB-41588

@darko99：谢谢！这一直困扰着我很长一段时间，JB 还没有修复它（WebStorm 无法识别路径 without 波浪线，Angular 无法识别它 with 它在场 - 烦人的 af，使用WebStorm 2021.3, #WS-213.5744.224)。

【参考方案2】：

与 Google API 一样，Angular Material 版本 11 和版本 12 之间存在混淆。

[简答]

在 SCSS 中，他们似乎不推荐使用 @import 支持 @use 语法。 Angular Material 似乎在 v11->12 左右的某个地方实现了这个更改 （我也是新手。这是我最好的猜测）。

Watch this YouTube video 大致了解差异。

There is a reason why Google Angular is the most dreaded framework of 2020 on Stack Overflow :) 所以这取决于您使用的 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);

虽然使用角度材料 v12 的相同示例使用 @use 语法

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

$my-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
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

[我还没有找到在 2 个版本中找到正确函数名称的方法。手动迁移主题并非易事，尤其是当您是新手时]

所以你可以看到，很容易丢失样式表，这取决于你使用的是 Material v11 还是 12。祝你好运

【讨论】：

尽管我和下一个开发人员一样讨厌 Angular，但有关“可怕”的链接视频谈论的是 Angular.js 而不是 Angular 2+，所以您可能需要对其进行编辑。

【参考方案3】：

显然，我一直在为我的版本阅读错误的文档。上面的代码有两件事需要更改才能为我工作。

你不这样做@use '~@angular/material' as mat;。重要的一行是@import '~@angular/material/theming';，它已经被 CLI 放入文件中。

不是@include elevation(16);，是@include mat-elevation(16);。

【讨论】：

谢谢！顺便说一句，也可以使用@use '~@angular/material/theming' as mat; 滚动。

其实最新版居然说要导入@use '~@angular/material' as mat;documentation

您可能正在使用较低版本的 Angular Material 主题。 v9.material.angular.io/guide/theming#defining-a-theme

This post 建议@use 更好。 Kurkov's answer 非常适合我。

【参考方案4】：

试试这个方法：

@use '@angular/material' as mat;

没有 ~ 符号。

希望对你有用

【讨论】：

这个问题已经回答得很清楚了。