@import with Sass causes errors with browser-esbuild and application builders

[ryanrivest]

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

No response

Description

If you use an import without referencing anything in the scss file, the import statement gets included in the generated component styles, which results in a 404 when you load the app. As soon as you reference something, this issue goes away and the styles are properly generated.

Below is a snippet of the generated bundle with the issue, and after referencing a variable in the imported scss.

Nothing referenced, import statement included (which causes the 404 error)

    t.\u0275cmp = Sr({
        selectors: [["app-root"]],
        styles: [`@import "variables";\r
\r
//[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r
//   color: $text-default;\r
// }`]
    });

Variable referenced, works as expected

    t.\u0275cmp = Sr({
        selectors: [["app-root"]],
        styles: ["p[_ngcontent-%COMP%]{color:#1a1a1a}"]
    });

Minimal Reproduction

Here's a reprod (steps below taken to create: https://github.com/ryanrivest/sass-issue-reprod). To reproduce, you just need to run:

• npm install
• npm run build
• npx http-server .\dist\sass-output-issue\browser\ -a localhost -p 4200

As soon as you load up the app, you should see 404 errors in the output:

[2023-12-13T00:19:43.508Z] "GET /variables" Error (404): "Not found"

If you uncomment the following from the app.component.scss, the error will go away.

// p {
//   color: $text-default;
// }

Steps taken to create reprod:

• ng new sass-output-issue, select SCSS
• update app.component.scss to include this line: @import "variables";
• create a sass folder, and add a _variables.scss file that defines some variables
• update angular.json to include this folder:

            "stylePreprocessorOptions": {
              "includePaths": ["src/sass"]
            },

Exception or Error

[2023-12-13T00:19:43.508Z] "GET /variables" Error (404): "Not found"

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 17.0.6
Node: 20.10.0
Package Manager: npm 10.2.5
OS: win32 x64

Angular: 17.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.6
@angular-devkit/build-angular   17.0.6
@angular-devkit/core            17.0.6
@angular-devkit/schematics      17.0.6
@schematics/angular             17.0.6
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

• The issue does not occur for ng serve.
• The issue goes away if I change to the old browser builder.

[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.}