Sass @use not loading partial

问题:

I'm trying to import a sass partial (_variables.scss) to use in my main stylesheet (global.scss), but I keep getting the Error: Undefined variable. on sass compiling.

Directory structure:

app
└─public
  └─styles
    │  global.css (output for sass compiling is here).
    └─sass
      └─_variables.scss
      └─global.scss

_variables.scss

$font-text: 'lato', sans-serif;

global.scss

@use '_variables';

body {
  font-family: $font-text;
}

Looking at the Sass documentation, I understand to use @use instead of @import (which works) because they are phasing it out.

What am I doing wrong here? Thanks.

回答1:

That's because you are not using Dart Sass which supports this feature.

Also in the documentation you will find:

Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.

So use @import until @use is supported.

BTW, If you want to use Dart Sass, just use sass instead of node-sass and require it in the webpack config, like:

// ...
{
  loader: 'sass-loader',
  options: {
    implementation: require('sass')
  }
}
// ...