So okay, I have this angular 21 project that gives an error, well error, warning.
The other day I also encountered this in another project. Time to dive in and see what this is about.
I have found this blog, Problems Importing Bootstrap into SCSS with @use Instead of @import: Extending Responsive Breakpoints & Variable Conflicts — codegenes.net, that explains why the @use is so much better than the @import.
Going back in time, it is like the angular rootScope in version 1. The magic rootScope where you’d place variables and magically you can use them everywhere. Now the @use makes this more strict, like typescript I would say.
Having all this AI power these days, I’ll ask copilot to fix this (using the auto settings)
There are scss warnings, can you solve them. I.e. use @use vs @import
The changes are quite easy. It places the overrides in the with statement.
Some issues:
- On line 56 there is another override, can we remove this?
- The @use is not the first statement in the scss file, this needs to be placed at the top of the file
There is a compile error
Okay, I’m just super lazy. I can also manually move the block to the top of the file hahaha.
Than the next part, moving it to the with part gave compilation errors. So the next best thing was to not use !important.
The result shows that there are no warnings:
