When Using browser-esbuild, Import Statements in SCSS Files Don't Work and Build Fails with Error

[mylifeandcode]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

I have a SCSS file containing variables which are used by other SCSS files in my application. This file is imported at the top of other SCSS files as such:

@import '/src/variables.scss';

However, if I use browser-esbuild as my builder, these import statements throw errors with the following message:

[ERROR] Can't find stylesheet to import.

Here is a complete example of one of them:

X [ERROR] Can't find stylesheet to import. ╷ 1 │ @import '/src/variables.scss'; │ ^^^^^^^^^^^^^^^^^^^^^ ╵ src\app\workouts\in-progress-workouts\in-progress-workouts.component.scss 1:9 root stylesheet [plugin angular-sass]

Minimal Reproduction

• Clone the repo at https://github.com/mylifeandcode/workouttracker.git
• Checkout the Angular17Upgrade branch.
• Go to the workout-tracker subdirectory.
• Run ng build.

Exception or Error

X [ERROR] Can't find stylesheet to import.
  ╷
1 │ @import '(filename SCSS file is attempting to import)';
  │         ^^^^^^^^^^^^^^^^^^^^^
  ╵
  (path to file attempting to import the SCSS file) 1:9  root stylesheet [plugin angular-sass]

Example:
X [ERROR] Can't find stylesheet to import.
  ╷
1 │ @import '/src/variables.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\app\workouts\in-progress-workouts\in-progress-workouts.component.scss 1:9  root stylesheet [plugin angular-sass]`

Your Environment

Angular CLI: 17.0.0
Node: 20.9.0
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 17.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0
@angular-devkit/build-angular   17.0.0
@angular-devkit/core            17.0.0
@angular-devkit/schematics      17.0.0
@angular/cdk                    15.0.1
@angular/cli                    17.0.0
@schematics/angular             17.0.0
rxjs                            6.6.7
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[alan-agius4]

Previously, this worked due to webpack specific logic.

There are 2 ways to resolve the error:

1. Update the path to a relative path @import '/src/variables.scss'; -> @import '../../../src/variables.scss';
2. Add "" to stylePreprocessorOptions, includePaths.

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

[mylifeandcode]

Thanks @alan-agius4, I owe you one...again. Keep up the good work, it is appreciated!

[billyjov]

@alan-agius4 What about paths from node_modules inside .scss ..e.g

@import '~quill/dist/quill.snow.css';

This will throw an error with the current application builder

Current hint from the CLI

You can mark the path "~quill/dist/quill.snow.css" as external to exclude it from the bundle, 
which will remove this error and leave the unresolved path in the bundle.

Is there a way to make the syntax valid for the application builder? Or are there other alternative to make imports from node_modules shorter as the current solution that works is use the relative path

@import '../../../../node_modules/quill/dist/quill.snow.css';

[tortuc]

Previously, this worked due to webpack specific logic.

There are 2 ways to resolve the error:

1. Update the path to a relative path @import '/src/variables.scss'; -> @import '../../../src/variables.scss';
2. Add "" to stylePreprocessorOptions, includePaths.

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

Thanks, It works well,

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}