Error importing the stylesheet file after upgrading from Angular 11 to 16

Question

I have a project that I have just upgraded it from Angular 11 to Angular 16. When I try to compile (ng build) the fist two errors shown are these two:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
   ╷
17 │ @import '~bootstrap/scss/functions';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\styles.scss 17:9  root stylesheet
 
./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
 HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
   ╷
17 │ @import '~bootstrap/scss/functions';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\styles.scss 17:9  root stylesheet

How do I reconfigure the paths to get rid of this error? I see that the "bootstrap" folder no longer exists in my "node_modules". Instead, after running "npm install", I now have "bootstrap4" and "bootstrap5". Even if I change the name of the folder, I still get a similar error.

Thanks, Eddie

Eddie · Accepted Answer · 2024-04-15 13:19:58Z

0

This actually turned out to be an easy fix, I followed the steps described in this YT video: https://www.youtube.com/watch?v=M7ELWgF-csE

Essentially, it requires you to uninstall Bootstrap and reinstall it and then just correct the paths by removing the "~" character in front. The name of the folder also changed from "bootstrap" to "bootstrap5".

answered Apr 15, 2024 at 13:19

Eddie

3596 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error importing the stylesheet file after upgrading from Angular 11 to 16

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related