Search code examples
angularsassvite

Angular new Vite builder compilation error when using sass with @use statements

Compilation error when trying to use Vite builder.

[ERROR] Can't find stylesheet to import.
@use 'src/styles/utils/mixins' as mixins;
src\app\app.component.scss 1:1 root stylesheet [plugin angular-sass]

enter image description here

Configs: enter image description here

there was no issue with esbuild browser builder.

Solution

  • It's a known issue with a new esbuild builder.

    Sass by default is only able to resolve files relative to the containing file. In other cases it will fallback to resolve files based on the loadPaths(includePaths previously).

    Under Webpack these work because additional paths are added in sass-loader to the include paths https://github.com/webpack-contrib/sass-loader/blob/49a578a218574ddc92a597c7e365b6c21960717e/src/utils.js#L306-L322.

    There are two solutions

    1. Use relative path

    2. Configure includePaths in angular.json.

    For single project workspace:

    "stylePreprocessorOptions": {
  "includePaths": [
    ""
  ]
},

    Multi project workspace:

    "stylePreprocessorOptions": {
  "includePaths": [
    "projects/<project-name>"
  ]
},