angular/angular-cli

ESBuild application builder breaks when using SCSS variables in asset URLs

daiscog opened this issue · 2 comments

daiscog commented

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

@angular-devkit/build-angular:browser builder

Description

Reopening #27209 because:

  • That issue was marked as a duplicate of #27007, which has been closed as fixed in v 18.0.0-next.3
  • However, the specific issue reported in #27209 still occurs in the latest 18.0.0-rc (linked demo project has been updated to verify)

When an application's main styles.scss imports code that uses a variable in the path for its assets - e.g.,: background-image: url('#{$images-path}/background.png'); - then the build falis with an unresolvable asset path.

Marked as a regression because this does not cause an error when using the legacy @angular-devkit/build-angular:browser builder. (See demo project, which provides architect targets for both builders.)

Use case: The application imports its styles from a 3rd party SCSS library installed as a dependency, and that library provides SCSS variables for assets, with a default value of a relative path internal to itself.

Minimal Reproduction

https://github.com/daiscog/esbuild-scss-asset-issues/tree/main

Exception or Error

Application bundle generation failed. [6.016 seconds]

✘ [ERROR] Could not resolve "../../assets/images/background.png" [plugin angular-css-resource]

    src/styles.scss:3:24:
      3 │   background-image: url("../../assets/images/background.png");
        ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Preprocessor stylesheets may not show the exact file location of the error.

Your Environment

❯ ng version

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

Angular CLI: 18.0.0-rc.2
Node: 18.20.2
Package Manager: npm 10.5.0
OS: darwin x64

Angular: 18.0.0-rc.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.0-rc.2
@angular-devkit/build-angular   18.0.0-rc.2
@angular-devkit/core            18.0.0-rc.2
@angular-devkit/schematics      18.0.0-rc.2
@angular/cli                    18.0.0-rc.2
@schematics/angular             18.0.0-rc.2
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.5

Anything else relevant?

No response

clydin commented

The issue here appears to be not the use of Sass variables but that the Sass interpolation # character is the first character within the string. A leading # within CSS indicates a fragment identifier which is why it is currently being skipped. From looking at the Dart Sass code, it looks like it special cases the fragment identifier case if the next character is the { character. Angular should be able to apply the same logic to its rebasing process.

  • 👍1
  • ❤️2