Semicolons error in SASS-Loader: "semicolons aren't allowed in the indented syntax in Angular Application

Issue

I'm facing an issue with my Angular project where the SASS files are generating errors during compilation with SASS-Loader. The error message specifically states:

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

These errors occur in multiple SASS files, such as styles.sass and theming/theme.sass, referencing imports and @use directives. The errors seem to be related to semicolons in the indented syntax of SASS.

Here are some sample snippets of the problematic SASS files:

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);

Full Logs

✔ 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

Solution

Please change the file name to scss instead of sass I think that is the root cause of the issue

You can run the command to do this!

ng set defaults.styleExt sass

article

You can also try renaming the files to sass if you still face this issue!

Answered By - Naren Murali