v18.0.0 errors when compiling bootstrap scss

[jnizet]

Command

build, serve

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

17.3.8

Description

When importing bootstrap scss in styles.scss, the build fails with the following error:

✘ [ERROR] Undefined variable.
    ╷
136 │         $string: url("../node_modules/bootstrap/scss||file:#{str-replace\(str-slice\($string,\ 6,\ -3\),\ $char,\ $encoded\)}");
    │                                                                                                                   ^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_functions.scss 136:115       escape-svg()
  node_modules/bootstrap/scss/forms/_form-select.scss 7:37  @import
  node_modules/bootstrap/scss/_forms.scss 4:9               @import
  node_modules/bootstrap/scss/bootstrap.scss 22:9           @import
  src/styles.scss 1:9                                       root stylesheet [plugin angular-sass]

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.scss';
        ╵         ~~~~~~~~~~~~~~~~~

Minimal Reproduction

Run the following commands:

npx @angular/[email protected] new --defaults --style scss bstest
cd bstest
npm i bootstrap
echo "@import 'bootstrap/scss/bootstrap';" > src/styles.scss
ng serve

Exception or Error

✘ [ERROR] Undefined variable.
    ╷
136 │         $string: url("../node_modules/bootstrap/scss||file:#{str-replace\(str-slice\($string,\ 6,\ -3\),\ $char,\ $encoded\)}");
    │                                                                                                                   ^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_functions.scss 136:115       escape-svg()
  node_modules/bootstrap/scss/forms/_form-select.scss 7:37  @import
  node_modules/bootstrap/scss/_forms.scss 4:9               @import
  node_modules/bootstrap/scss/bootstrap.scss 22:9           @import
  src/styles.scss 1:9                                       root stylesheet [plugin angular-sass]

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.scss';
        ╵         ~~~~~~~~~~~~~~~~~

### Your Environment

```text
Angular CLI: 18.0.0
Node: 20.12.2
Package Manager: npm 10.5.0
OS: darwin x64

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

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

Anything else relevant?

No response

[pavankjadda]

Yep. I see the same issue as well

[pavankjadda]

See https://github.com/ng-select/ng-select/actions/runs/9201162093/job/25308894461#step:7:13 for reference

[jnizet]

Thank you so much for the quick fix and the quick release.

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