`browser-esbuild` unable to import scss files

[pavankjadda]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

No

Description

When I build the Angular application that uses scss and import scss files in styles.scss with browser-esbuild, I get error

✘ [ERROR] [plugin angular-sass] Can't find stylesheet to import.

I did try to add root path to angular.json file, still saw the same error

 "stylePreprocessorOptions": {
              "includePaths": [""]
            },

🔬 Minimal Reproduction

1. Clone the repo https://github.com/pavankjadda/angular-cli-esbuild-bug
2. Run command ng build

🔥 Exception or Error

✘ [ERROR] [plugin angular-sass] Can't find stylesheet to import.
  ╷
2 │ @import '~bootstrap/scss/bootstrap.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 2:9  root stylesheet

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

🌍 Your Environment

Angular CLI: 14.2.1
Node: 18.8.0 (Unsupported)
Package Manager: npm 8.18.0 
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.1
@angular-devkit/build-angular   14.2.1
@angular-devkit/core            14.2.1
@angular-devkit/schematics      14.2.1
@angular/cli                    14.2.1
@schematics/angular             14.2.1
rxjs                            7.5.6
typescript                      4.7.4

[JoostK]

Tilde imports are non-standard and will start reporting a deprecation warning in v15 (#23787).

[clydin]

As @JoostK mentioned, the tilde prefix is a non-standard, Webpack-specific extension. Webpack itself has also deprecated its use and it is not recommended for use within the Angular CLI.

Please update the import statement to @import 'bootstrap/scss/bootstrap.scss';. If you are still encountering the problem after this change, please let us know.

[pavankjadda]

As @JoostK mentioned, the tilde prefix is a non-standard, Webpack-specific extension. Webpack itself has also deprecated its use and it is not recommended for use within the Angular CLI.

Please update the import statement to @import 'bootstrap/scss/bootstrap.scss';. If you are still encountering the problem after this change, please let us know.

Thanks I did not know that. Removing ~ fixed the error.

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