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/cli@18.0.0 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