sass/no-import

Why

@import puts every variable, mixin and function of every imported file into one global namespace, so names collide silently and nobody can tell where $primary comes from. A file imported twice is compiled twice. Dart Sass has deprecated it since 1.80.0 and prints a warning on every build; Dart Sass 3.0.0 removes it.

Fix

Use @use 'tokens'; and refer to members by namespace (tokens.$space-4, tokens.rem(24)); re-export a folder's partials from an index file with @forward. Configure a library with @use 'lib' with ($primary: #0a7) instead of setting variables before importing it. sass-migrator module --migrate-deps src/main.scss does most of the work. Plain CSS imports (url(...), a .css file, an http(s):// URL or one with a media query) are not affected.

Examples

// bad
@import 'tokens';
.card { padding: $space-4; }
// good
@use 'tokens';
.card { padding: tokens.$space-4; }

Sources

• Sass docs, Breaking change - @import and global built-in functions
• Sass docs, @use
• Sass docs, @import (plain CSS imports)

Read it in the terminal

npx github:dawidolko/frontend-skills explain sass/no-import