CODEWITHSUNDEEP
cssreactjssasscompiler-errors
Simx72
Simx72

Reputation: 175

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

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;

Upvotes: 16

Views: 17917

Answers (2)

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

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

Upvotes: 0

Guilherme Esdras
Guilherme Esdras

Reputation: 444

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.

Upvotes: 32

Related Questions