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

Question 1

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

Question 2

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

Leave a Comment Cancel reply