Sass @use not loading partial
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.
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')
}
}
// ...
Short Answer
You can access variables, functions, and mixins from another module by writing < namespace >.< variable >, < namespace >.< function>()>, or @include < namespace >.< mixin >(). By default, the namespace is just the last component of the module’s URL.
That means by using variables.$font-text
global.scss
@use '_variables';
body {
font-family: variables.$font-text;
}
SASS Documentation on Loading Members
Long Answer
So the answer or @llobet was using webpack
and the answer of @Jamie Marshall was using gulp file, but I was trying to use SASS
using Node JS
and needed a step by step guide to make it work.
Here is how I made @use
work - Step by step guide using Dart Sass
with Node JS
.
1. Create New Node Project
npm init
2. Install Dart SASS
npm i sass
Optionally you can also install AutoPrefixer using npm install postcss-cli autoprefixer
3. Configure NPM Script to Compile SASS
In Package.json, add script compile:sass
to compile sass to css
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile:sass": "sass --watch scss:assets/css"
},
4. Create SCSS folder and inside it create style.scss file
Above script compile:sass
expects a folder called scss
on the root of the project and a .scss
file inside that folder
Paste the following inside .scss
file
@use '_variables';
body {
font-family: variables.$font-text;
}
5. Create Partial file _variables.scss
Create a partial file named _variables.scss
on the same directory scss
and paste the following code in it
$font-text: 'lato', sans-serif;
6. Compile SASS to CSS
Run the following script inside your project's root folder to compile SASS to CSS
npm run compile:sass
Now you would see a folder named assets
and inside it there would be a folder named css
and inside it your css
file would be compiled.