Sass @use not loading partial

Question

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.

Answer 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')   } } // ... 

Answer 2

This is a very important update to the accepted answer by @llobert. After hours of searching, it turns out node-sass relies on libsass which is the C++ implementation of sass. According the docs for the libsass repository this C++ implementation has been deprecated.

Okay, so you may think, as easy as installing dart-sass, however you will find the docs have fallen behind here as well. If you go to dart-sass on npm you'll find:

So what you have to do now is:

npm install sass 

And just in case, like myself, the reader of this is researching the whole sass affair because they are using gulp-sass:

At the bottom of the gulp-sass npm page you will find this tid bit.

Ah, what do you know. The default hasn't changed, but the underlying libsass libary has fallen behind due to depreciation. Thus you must add this to your gulp file:

var sass = require('gulp-sass'); sass.compiler = require('sass'); 

So long story short, there are some changes going on in the SASS world that have been drastic, but yet seemingly happened very quietly. I hope this recount of my last few hours will save some future devs a lot of time searching till the docs get sorted out.