The Secret Power of meta.load-css(): A Sass Upgrade Survival Story

While upgrading my Angular project from version 18 to 19, I ran into a frustrating barrier. Sass started throwing warnings about the deprecation of @import, urging me to switch to the new module system with @use and @forward .

DEPRECATION WARNING: Using /path/to/file.scss with @import is deprecated and will be removed in Dart Sass 2.0.0. Use @use instead.

So I did as told, replacing @import with @use and following the modern Sass recommendations. But soon, a new headache emerged. Unlike the old import, @use could only be placed at the top of the file, not inside the specific selectors where I wanted it. Suddenly, styles from third-party libraries started leaking everywhere and colliding with my own designs not ideal, especially since my code is reused in other sites.

My first instinct was to try prefixing everything using PostCSS to namespace the CSS, but that didn’t work as expected. The more I tried to fix it, the more I felt like I was making it worse. For a while, I was stuck, unsure if there was even a clean solution.

Then one day, while browsing Medium, a clickbait title about advanced Sass tricks caught my attention. The blog wasn’t a direct solution, but it made me curious enough to dive into the Sass docs again. That’s when I stumbled upon the sass:meta module. something I had never paid attention to before. Buried in the documentation was this gem:

@use "sass:meta";

.my-component {
  @include meta.load-css("path/to/third-party-library");
}

It was exactly what I needed. meta.load-css() allowed me to load third-party styles in a controlled way, keeping them scoped so they wouldn’t interfere with the rest of my project. It was like having the best of both worlds: the new @use syntax without the unwanted global style pollution.

After implementing it, my CSS was back under control, the Angular 19 upgrade was complete. and I learned an important lesson. sometimes the answer isn’t in the first blog you read or the first error message you see. Sometimes it’s hiding in a part of the documentation you didn’t even know existed. And in my case, it was hiding in sass:meta.

Thank you! Happy coding 👨‍💻