In sass, replacing @import with @use not expanding variables

user_13943062 0
Viewed 263

I want to start using @use instead of @import, since @import is going to be depreciated. I have a partial:

// _test.scss
$color1: #ee00ee;

referenced by:

// demo.scss
@use test;
html {
  color: $color1;
}

If I comment out the html: $color1 line, I get no error. If I delete _test.scss I get a file not found error, so it seems the file is included.

But when everything is in place, I'm getting an undefined variable error. If I replace @use with @import, I get no error and the generated css has the expected color.

I'm on a Mac (big sur), using dart sass:

% dart --version
Dart SDK version: 2.9.3 (stable) (Tue Sep 8 11:21:00 2020 +0200) on "macos_x64"

The docs I've seen say that @use will replace @import, so I thought just changing to @use would be easy. Is there a step I'm missing?

sass
1 Answers

It's a bit late, but as I understand it, @use treats the partial as modules, which more closely resembles the way JavaScript treats ES modules: In particular, the @use statement makes available a namespaced bit of external code, which changes the way you reference imported variables (and mixins and functions as well):

// demo.scss
@use test;
html {
  color: test.$color1;
}

Some documentation is found in the article about @use on the SASS docs, and this article explains dart-sass' namespacing in some detail.

user_77276550
Related