Esto se debe a que no está utilizando Dart Sass, que es compatible con esta función.

También en la documentación encontrará:

Solo Dart Sass actualmente es compatible con @use. Los usuarios de otras implementaciones deben usar la regla @import en su lugar.

Así que use @import hasta que @use sea compatible.

Por cierto, si quieres usar Dart Sass, solo usa sass en lugar de node-sass y pídelo en la configuración del paquete web, como:

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

Esta es una actualización muy importante de la respuesta aceptada por @llobert. Después de horas de búsqueda, resulta que node-sass se basa en libsass, que es la implementación de sass en C++. De acuerdo con los documentos del repositorio libsass, esta implementación de C++ ha quedado obsoleta.

De acuerdo, entonces puede pensar, tan fácil como instalar dart-sass, sin embargo, encontrará que los documentos también se han retrasado aquí. Si vas a dart-sass en npm encontrarás:

Así que lo que tienes que hacer ahora es:

 npm install sass

Y por si acaso, como yo, el lector de esto está investigando todo el asunto de sass porque están usando gulp-sass:

En la parte inferior de la página de gulp-sass npm encontrará este pequeño detalle.

Ah, qué sabes. El valor predeterminado no ha cambiado, pero la biblioteca libsass subyacente se ha retrasado debido a la depreciación. Por lo tanto, debe agregar esto a su archivo Gulp:

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

Para resumir, se están produciendo algunos cambios en el mundo de SASS que han sido drásticos, pero aparentemente ocurrieron de manera muy silenciosa. Espero que este recuento de mis últimas horas les ahorre a algunos futuros desarrolladores mucho tiempo buscando hasta que se resuelvan los documentos.

Respuesta corta

Puede acceder a variables, funciones y mixins desde otro módulo escribiendo < espacio de nombres >.< variable >, < espacio de nombres >.< función >()>, o @include < espacio de nombres >.< mixin >(). De forma predeterminada, el espacio de nombres es solo el último componente de la URL del módulo.

Eso significa usar variables.$font-text

global.scss

 @use '_variables'; body { font-family: variables.$font-text; }

Documentación SASS sobre miembros de carga

Respuesta larga

Entonces, la respuesta o @llobet estaba usando webpack y la respuesta de @Jamie Marshall estaba usando un archivo gulp, pero estaba tratando de usar SASS usando Node JS y necesitaba una guía paso a paso para que funcionara.

Así es como hice que @use funcione: guía paso a paso usando Dart Sass con Node JS .

1. Crear nuevo proyecto de nodo

 npm init

2. Instalar Dardo SASS

 npm i sass

Opcionalmente, también puede instalar AutoPrefixer usando npm install postcss-cli autoprefixer

3. Configure el script NPM para compilar SASS

En Package.json, agregue script compile:sass para compilar sass a css

 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "compile:sass": "sass --watch scss:assets/css" },

4. Cree la carpeta SCSS y dentro de ella cree el archivo style.scss

La compile:sass espera una carpeta llamada scss en la raíz del proyecto y un archivo .scss dentro de esa carpeta

Pegue lo siguiente dentro del archivo .scss

 @use '_variables'; body { font-family: variables.$font-text; }

5. Crear archivo parcial _variables.scss

Cree un archivo parcial llamado _variables.scss en el mismo directorio scss y pegue el siguiente código en él

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

6. Compilar SASS a CSS

Ejecute el siguiente script dentro de la carpeta raíz de su proyecto para compilar SASS a CSS

 npm run compile:sass

Ahora vería una carpeta llamada assets y dentro de ella habría una carpeta llamada css y dentro de ella se compilaría su archivo css .