Import scss in react

Question

I have a react project with scss files, I have variables file that I want to be accessible in all files. Until now when I want to use variable in another scss file(like in component) I need to import variables file in each component that I want to use that. I tried to use sass-resources-loader package but it also did not work. Any idea?

Answer 1

For using SCSS in React you have to install node-sass firstly, so you can simply add it to your project by the command below:

npm install node-sass
# or
yarn install node-sass

Then you can freely change your CSS files to SCSS.

But what is the error says actually?

In your Layout.scss file you are using a variable which is $color-white and you didn't define it in the file properly, so you should either define in like this $color-white: #FFFFFF; in the same file (Layout.scss) or define it in the other file and import the file into your current file. For instance, you can create a file and name it as Constants.scss like this:

//Constants.scss

$color-white: #FFFFFF;

And then import it in the Layout.scss just like this:

//Layout.scss

import "./constants.scss"; // I Assume they are in the same directory.

Update

As if today the node-sass approach has been deprecated and it is recommended to use sass instead.

So it will be like this:

npm install sass
# or
yarn add sass