SASS: unable to resolve resource specified in the CSS url(...) function

[Guerric-P]

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

14 (with classic builder)

Description

When including a SCSS file that has references to other resource files (via the CSS url function), the builder should resolve these resource files, relatively to the current SCSS file (if it's a relative URL) and include them in the dist directory.

Minimal Reproduction

• Create an Angular 17 blank project with ng new
• Install the latest material-icons library with npm i material-icons
• Add the following line in the styles.scss file: @import "../node_modules/material-icons/iconfont/material-icons.scss"

Exception or Error

X [ERROR] Could not resolve "./material-icons.woff2" [plugin angular-css-resource]

    src/styles.scss:6:11:
      6 │   src: url("./material-icons.woff2") format("woff2"), url("./materi...
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~

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

Your Environment

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


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

Angular: 17.0.2
... animations, common, compiler, compiler-cli, core, forms
... 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/cli                    17.0.0
@schematics/angular             17.0.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

The issue is also present with Angular 16 esbuild preview, so it's a regression comparing to the old build engine, but it has likely always been present with the new esbuild engine.

[dgp1130]

We typically try to avoid including node_modules paths in source code where possible as it breaks when used with Yarn PnP-style package manager modes. Does @import "material-icons/iconfont/material-icons.scss" work in this case? I suspect it would be better to align with Node module resolution logic as much as possible.

All that said, I can see an argument that we might want to align behavior with the Webpack builder just for compatibility to make the upgrade process easier.

[Guerric-P]

@dgp1130 @import "material-icons/iconfont/material-icons.scss" doesn't work either, same exact error.

[clydin]

Due to the lack of native url() rewriting in Sass (sass/sass#2535) and the dynamic generation of the font URLs in this package via Sass variables, the build system cannot effectively resolve the font URLs.
The material-icons package does provide a variable that is intended to be used in these situations. The following example should provide a working solution. Once Sass provides native rewriting the variable will no longer be needed.

$material-icons-font-path: "material-icons/iconfont/";
@import "material-icons";

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