Angular Material@15 SCSS编译报错求助：无法找到导入样式表

问题背景 #

我尝试编译SCSS文件生成CSS，但一直遇到导入错误。

原始SCSS文件（client.scss） #

@use '../../../node_modules/@angular/material' as mat;
@use '../../../node_modules/@angular/material/theming';

$branding-url-root: 'https://localhost:8080/resources/';
$brand-font: 'montserrat';
$brand-primary-color: #037fb0;

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap');

$custom-typography: mat.define-typography-config(
        $font-family: $brand-font+', sans-serif'
);

body {
  font-family: $brand-font;
}

@include mat.core($custom-typography);
@include mat.all-legacy-component-typographies();
@include mat.legacy-core($custom-typography);

$md-client: (
        50 : #E1F0F6,
        100 : #B3D9E7,
        200 : #81BFD8,
        300 : #4FA5C8,
        400 : #2992BC,
        500 : transparentize($brand-primary-color, 0.0),
        600 : transparentize($brand-primary-color, 0.0),
        700 : #026CA0,
        800 : #026297,
        900 : #014F87,
        A100 : #B3DBFF,
        A200 : #80C2FF,
        A400 : #4DAAFF,
        A700 : #349EFF,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #ffffff,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$client-app-primary: mat.define-palette($md-client);
$client-app-warn:    mat.define-palette($md-client);
$client-app-theme:   mat.define-light-theme($client-app-primary, $client-app-primary, $client-app-warn); //, $client-app-accent, $client-app-warn);

app-header #header-toolbar.mat-toolbar{
  display: none;
  background-image: url($branding-url-root+'public/client_Logo.png');
}

app-header #product-name {
  color: #505050;
}

@include mat.all-legacy-component-themes($client-app-theme);

.mat-stroked-button:not([disabled]) {
  border-color: $brand-primary-color;
  border-width: 2px;
}

执行的编译命令 #

npm install
npm install @angular/material@15.2.5
npm install @angular/cdk@15.2.5
npm install -g sass@1.62.1
sass client.scss brand-theme.css

报错信息 #

drwxr-xr-x 8 root root  4096 May 31 04:53 node_modules
-rw-r--r-- 1 root root 43311 May 31 04:53 package-lock.json
-rwxr-xr-x 1 root root  2167 May 31 05:00 client.scss
sh-4.2# sass client.scss brand-theme.css
Error: Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  ../node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  ../node_modules/@angular/material/_index.scss 18:1                            @use
  client.scss 1:1                                                               root stylesheet

2023年6月7日更新 #

我创建了简化的测试文件定位问题：

简化SCSS文件（abc.scss） #

@use '@angular/material' as mat;
@include mat.core();

配置文件（config.sassrc） #

{
    "includePaths": [
        "./node_modules"
    ]
}

package.json内容 #

{
  "name": "fol1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/material": "^15.2.9"
  }
}

文件夹结构：

• 根目录
  • node_modules/
  • abc.scss
  • config.sassrc
  • package.json
  • package-lock.json

执行编译后仍报错「Can't find stylesheet to import」。

改为相对路径导入时：

@use './node_modules/@angular/material' as mat;
@include mat.core();

出现新错误：找不到mat.core()混入。

我怀疑config.sassrc未生效，核心问题是Sass无法找到node_modules中的样式表，请问我遗漏了什么？

解决方案 #

1. 修正配置文件名称 #

你安装的sass@1.62.1是Dart Sass，它不会自动识别config.sassrc，正确的配置文件名称是：

• .sassrc（注意开头的点）
• 或sass.config.js（JS格式配置）

将config.sassrc重命名为.sassrc，内容保持不变即可。

2. 命令行直接指定依赖路径 #

如果配置文件仍不生效，可在编译命令中直接添加--load-path参数指定node_modules路径：

# 针对简化的abc.scss
sass --load-path=./node_modules abc.scss brand-theme.css

# 针对原始的client.scss
sass --load-path=./node_modules client.scss brand-theme.css

3. 补全缺失的依赖 #

Angular Material内部依赖@material/web包，若该包缺失，手动安装：

npm install @material/web

4. 避免直接用相对路径导入Angular Material #

用@use './node_modules/@angular/material'会打乱内部样式的命名空间映射，导致混入无法找到。推荐配合includePaths使用模块名导入（@use '@angular/material' as mat）。

内容的提问来源于stack exchange，提问作者Ravi