SASS docs say @import is becoming deprecated... update to @use and @forward

[mmestas]

I've created custom and multiple bootstrap themes (ex. a dark and light theme) for some of my angular projects and utilize SASS @import rule for this. However, according to their docs, @import is becoming deprecated and will no longer be supported in about a year from now. Anticipating this, I'm trying to migrate to @use and @forward, but it's not going smoothly.

Seeing that bootstrap 5 still utilizes the @import rule as well, how will this be supported in the future? Will the next version of Bootstrap utilize @use instead? Do you have any support on how to create multiple bootstrap themes with the @use @forward rules?

[ffoodd]

Not yet. What you're pointing is true for Dart Sass only, and we still have tons of users using Libsass (and not knowing they do, in most cases).

Sass (through Dart Sass) is going very fast after a decade without breaking changes. And that's not accounting for the current state of tooling and knowledge out there. We cannot simply jump on Dart Sass for now.

If you have any recommandations on how this could be done, or any advices, they're more than welcome and could bé shared in our docs.

[mmestas]

Are you asking how bootstrap could be updated to Dart Sass, or how, if updated, could integrate easily with users still using libraries that only handle Libsass?

[ffoodd]

As far as I know, there's no way to jump on Dart Sass while staying compatible with Libsass. I guess we'll tackle with V6, but there's no easy path forward.

[mmestas]

Here's an example where I converted all the @imports to @use and then used @use whenever necessary in the files: https://codesandbox.io/s/competent-surf-b15fp?file=/src/app/app.component.html (See the bootstrap folder)

I changed a couple of circular dependencies. Not the best or the cleanest if you're trying to really organize a modular system, but it works. However, I don't think this would work with a compiler that only uses libsass.