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;

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.