SassError: Invalid CSS expected expression (e.g. 1px, bold)

Question

I am learning sass in react but I am getting this error and I can't find the answer. I have installed node-sass and everything was compiling good but when I tried to import variables I can't use them

./src/App/sass/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App/sass/styles.scss)
SassError: Invalid CSS after "...: mis-variables": expected expression (e.g. 1px, bold), was ".$default-font;"
        on line 31 of src/App/sass/styles.scss
>>     font-family: mis-variables.$default-font;

   ------------------------------^

styles.scss:

/* Variables */

@use "mis-variables";

/* SASS Code */

%no-padding {
    padding: 0;
    margin: 0;
}

html {
    @extend %no-padding;
    font-family: mis-variables.$default-font;
}

body {
    @extend %no-padding;
}

_mis-variables.scss:

$default-font: 'Dosis',
Arial,
Helvetica,
sans-serif;

Trappings

does it work when you switch to import syntax? – Secessionist

Answer 1

Node-sass causes this problem to me too. I fixed it using sass instead of node-sass.

Just run npm install sass and should work.

Flatware

To add to this upvoted and correct answer. IF you have node-sass installed, get rid of it with npm uninstall node-sass and then restart your serve client having already npm install sass. – Queer

Answer 2

Also you can check Node.js version. "node-sass": "7.0.1" for example, won't work on node.js v16, after updating to node.js v18 issue disappeared. To keep node.js v16 and v18 in one machine (in case of using different environments on different projects in same machine) you can use NVM

Lindyline