Scope your CSS imports with meta.load-css in Sass

In contrast to the old @import rule to import SCSS files in Sass, the newer @use rule can only be used at the top level of a file, before any other statements. Using it inside a CSS selector is not allowed. For example:

.dark-theme {
  // Works
  @import "./dark-theme.scss";

  // Does NOT work
  @use "./dark-theme.scss";
}

But there is still a way for scoped imports. The meta.load-css function allows you to import a SCSS file inside a CSS selector and scope it to that selector:

@use "sass:meta";

.dark-theme {
  @include meta.load-css("./dark-theme.scss");
}

Unlike @import, meta.load-css does not affect the parent selector & in the imported file. Given the following file:

// dark-theme.scss
button {
  & + & {
    margin-inline-start: 1rem;
  }
}

Importing it with @import would result in a CSS selector that is technically valid but likely not what you want:

// Using @import results in:
.dark-theme button + .dark-theme button {
  margin-inline-start: 1rem;
}

Using meta.load-css however does not break the parent selector:

// Using meta.load-css results in:
.dark-theme button + button {
  margin-inline-start: 1rem;
}