Can't @use mixin, but can @import

I have a top-level file that only has:

@mixin bg_img($path) {
  background-image: url("http://localhost:4102/app/ui/" + $path);
}

If I @import it, everything is fine. If I @use it, then it doesn’t come through. For example, this fails, but if I change the @use to @import, it succeeds:

@use 'mixins';

.bg {
    @include bg_img("photo.jpg");
}

Side point: the file is minimal on purpose - I plan to rewrite it just before running sass so that the string can be replaced (depending on whether it’s in production or dev environment). Is there a better way to do that?

[Halfist]

I’m willing to migrate from deprecated @import to @use. I’m sorry if this shouldn’t be posted here, and I’m also sorry if an answer is already given somewhere, but I tried really hard to find it over the internet.

So, the question is basically how can I migrate from

.my-theme {
  @import 'variables';
  @import 'global';
  @import 'components';
}

to

.my-theme {
  @use 'variables';
  @use 'global';
  @use 'components';
}

in Angular 10 app.

The second results in “SassError: This at-rule is not allowed here.”.

The point is that styles in imported stylesheets shouldn’t leak outside of .my-theme.

My imported stylesheets aren’t mixins, functions or variables. They’re just a bunch of CSS rule-sets. Some of them however could contain varibles, but this is secondary.

[jathak]

One note: @import is not deprecated yet. It will be in the future, but at the moment it’s still actively supported. You mention that you’re using Angular, which hasn’t yet migrated to the module system (they’re working on it right now), and we recommend waiting to migrate until all of your dependencies have migrated.

When you do migrate, provided you don’t need access to any Sass members, you can use the meta.load-css mixin, which loads the CSS rules from a stylesheet without making variables, mixins, or functions accessible. Unlike @use, it can be used anywhere.