SASS-Loader 中的分号错误：“Angular 应用程序中的缩进语法中不允许使用分号

Question

我的 Angular 项目面临一个问题，其中 SASS 文件在使用 SASS-Loader 编译期间生成错误。错误消息具体指出：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
semicolons aren't allowed in the indented syntax.

这些错误发生在多个 SASS 文件中，例如引用导入和

styles.sass

指令的

theming/theme.sass

和

@use

。这些错误似乎与 SASS 缩进语法中的分号有关。

以下是有问题的 SASS 文件的一些示例片段：

styles.sass

@import 'theme.sass';

主题/theme.sass

@use '@angular/material' as mat;

$theme-palette: (
    50 : #f4e6e5,
    100 : #e3bfbf,
    200 : #d19595,
    300 : #bf6b6a,
    400 : #b14b4a,
    500 : #a32b2a,
    600 : #9b2625,
    700 : #91201f,
    800 : #881a19,
    900 : #77100f,
    A100 : #ffabaa,
    A200 : #ff7877,
    A400 : #ff4644,
    A700 : #ff2d2a,
    contrast: (50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);

@include mat.core();

// Define your primary, accent, and warn colors
// Define your primary palette using the provided colors
$theme-primary: mat.define-palette($theme-palette, 500);

// Define the accent and warn palettes (adjust colors as needed)
$theme-accent: mat.define-palette($theme-palette, 'A200', 'A100', 'A400');
$theme-warn: mat.define-palette($theme-palette, 'A400', 'A200', 'A700');

// Define the custom theme
$custom-theme: mat.define-light-theme((color: (primary: $theme-primary,
                accent: $theme-accent,
            ),
            typography: mat.define-typography-config(),
            density: 0,
        ));

// Register the theme with Angular Material
@include mat.all-component-themes($custom-theme);

完整日志

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |  Raw Size
vendor.js           | vendor        |   6.33 MB |
polyfills.js        | polyfills     | 333.18 kB |
styles.js           | styles        | 239.31 kB |
main.js             | main          |  22.31 kB |
runtime.js          | runtime       |   6.53 kB |

                    | Initial Total |   6.92 MB

Build at: 2024-01-06T07:32:24.510Z - Hash: 31ab0a294b3109b4 - Time: 14282ms

./src/styles.sass - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
semicolons aren't allowed in the indented syntax.
  ╷
1 │ @import 'theme.sass';
  │                     ^
  ╵
  src\styles.sass 1:21  root stylesheet

./src/theming/theme.sass - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
semicolons aren't allowed in the indented syntax.
  ╷
1 │ @use '@angular/material' as mat;
  │                                ^
  ╵
  src\theming\theme.sass 1:32  root stylesheet

./src/styles.sass?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):      
semicolons aren't allowed in the indented syntax.
  ╷
1 │ @import 'theme.sass';
  │                     ^
  ╵
  src\styles.sass 1:21  root stylesheet

./src/theming/theme.sass?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):      
semicolons aren't allowed in the indented syntax.
  ╷
1 │ @use '@angular/material' as mat;
  │                                ^
  ╵
  src\theming\theme.sass 1:32  root stylesheet

Answer 1

请将文件名更改为

scss

而不是

sass

我认为这是问题的根本原因