Stopping the Global Scope Leak: Migrating from @import to @use in Sass
Stop fighting global scope collisions in Sass. Learn how @use and @forward replace @import to provide namespacing, private members, and configurable design tokens.
Loading…
ReadMeFeed / Community knowledge
#dart-sass
Real questions. Useful conversations. Find the people who know your stack.
sassImplementing the Sass Module System with @use and @forward
Stop using @import in Sass. Learn how to use @use and @forward to implement namespacing, prevent global variable collisions, and build maintainable design systems.
Solving Namespace Collision: Moving from @import to the Sass Module System
Stop fighting global namespace collisions in Sass. Learn how to use @use and @forward to encapsulate styles, eliminate duplicate CSS, and build a scalable UI library entry point.
Sass @use versus @import: map key resolution across implementations
Sass maps compile to flat CSS custom properties, enabling theme variable interoperability between preprocessor authoring and runtime stylesheets. A precise goal is to determine how map key resolution behaves when identical map definitions are processed through Dart Sass @use and Ruby Sass @import directives, particularly regarding the return value of map.get
Can Dart Sass 2.0's async-only importers/functions be used in low-traffic projects without increasing build complexity?
Background Dart Sass 2.0 removed the legacy synchronous JavaScript API, requiring custom importers and functions to use the async-only API. This forces projects with custom Sass logic to adopt async compilation patterns, even for simple use cases. For low-traffic projects, the primary cost is developer time spent refactoring build tooling rather than computa
Dart Sass @import deprecation: how should a mixed @import/@use codebase sequence its migration?
Migration sequencing during the @import deprecation window Dart Sass now emits deprecation warnings for @import (starting around the 1.80 release line) while still compiling it, and the documented replacement is the module system built on @use and @forward . The goal is to migrate a large stylesheet codebase to the module system without breaking builds mid-t
Sass @use modules and plain CSS dependency resolution
Module System Integration The transition from @import to the @use rule in Dart Sass introduces a strict requirement for source files to be .sass or .scss . While @use provides better encapsulation and prevents redundant evaluations of shared partials, it does not support the loading of plain .css files. Architectural Constraint Projects relying on third-part
Does Dart Sass require explicit --embed-sources to include source content in source maps?
Goal: Determine whether the default source‑map behavior in Dart Sass (≥1.23) provides a reliable way to back up and verify recovered Sass source after CSS compilation. Constraint: With the default configuration the embedSources flag is false, so generated .css.map files reference external .scss files rather than embedding their content. Verification therefor
Sass @use Namespace Limits: CSS Custom Properties Stay Outside Module Scope
Since Dart Sass 1.23, the @use rule loads stylesheets as namespaced modules, and Sass variables like $primary can be referenced through an alias such as t.$primary . The documented behavior for CSS custom properties is different: declarations like --primary are plain CSS rather than Sass variables, so they are not exposed through a module namespace and are n