Angular项目SASS-Loader报错：缩进语法不允许使用分号

错误说明 #

使用sass-loader编译.sass后缀文件时触发编译失败，核心错误提示：

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

错误集中在styles.sass、theming/theme.sass等文件的@import、@use指令及变量定义处，原因是缩进式SASS语法（.sass）不允许使用分号结尾。

问题代码示例 #

styles.sass #

@import 'theme.sass';

theming/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

解决方案 #

核心修复步骤 #

1. 移除所有分号：删除.sass文件中所有语句末尾的分号，包括@import、@use、变量赋值、@include等指令。
2. 遵循缩进式语法规范：.sass文件依赖缩进代替大括号组织代码结构，无需分号结尾。

修改后的代码示例 #

styles.sass

@import 'theme.sass'

theming/theme.sass（关键片段）

@use '@angular/material' as mat

$theme-palette: (
    50 : #f4e6e5,
    100 : #e3bfbf,
    ... // 其余颜色项保留逗号（可选，缩进式语法支持逗号分隔）
)

@include mat.core()

$theme-primary: mat.define-palette($theme-palette, 500)

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

@include mat.all-component-themes($custom-theme)

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