Short Answer
To access variables, functions, and mixins from another module, you can use < namespace >.< variable >, < namespace >.< function>(), or @include < namespace >.< mixin >(). By default, the namespace is typically the last component of the module’s URL.
This means utilizing variables.$font-text
global.scss
@use '_variables';
body {
font-family: variables.$font-text;
}
SASS Documentation on Loading Members
Long Answer
The answer by @llobet involved using webpack, while @Jamie Marshall suggested using a gulp file. However, my approach was to utilize SASS with Node JS and I required a detailed guide to accomplish this task.
Here is my step-by-step guide on how I made @use work with Dart Sass and Node JS:
1. Create a New Node Project
npm init
2. Install Dart SASS
npm i sass
You can optionally install AutoPrefixer using
npm install postcss-cli autoprefixer
3. Configure NPM Script for Compiling SASS
In your Package.json, add the script compile:sass to compile SASS into CSS
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile:sass": "sass --watch scss:assets/css"
},
4. Create an SCSS Folder and Add style.scss Within It
The script compile:sass expects a folder named scss at the root of your project along with a .scss file inside that folder
Add the following content to your .scss file
@use '_variables';
body {
font-family: variables.$font-text;
}
5. Create Partial File _variables.scss
In the same directory as the SCSS folder, create a partial file named _variables.scss and insert the following code within it
$font-text: 'lato', sans-serif;
6. Compile SASS to CSS
Execute the following script in your project's root directory to compile SASS into CSS
npm run compile:sass
You should now find a folder named assets containing a subfolder named css, which houses your compiled CSS file.