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?

Error When npm start react

SMAKSS · Accepted Answer · 2022-05-20 05:17:19Z

3

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

edited May 20, 2022 at 5:17

answered Apr 30, 2020 at 20:30

SMAKSS

10.6k3 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mat Over a year ago

Until now I did exactly like that, but in every component I need to import constants file. I want to import constants file once and to use that everywhere in app.

SMAKSS Over a year ago

@mat Basically there is no certain way to it automatically in React apps. But there is a tricky way that you can follow (You can create partial files and add them into your entry point file). just follow this post and tell me if you had any problem with it.

mat Over a year ago

okay this works for me. what about this sass-resources-loader package? this should make sccs files available in all project files

SMAKSS Over a year ago

@mat You should either use sass-resources-loader or node-sass (Don't use both of them at the same time). node-sass is much more popular so I just suggest to stick with that. Also if the answer works for you please make sure to mark it as an answer to allow other peeps in the community to find their answer easier if they facing the same issue. (For marking it as an answer you can simply follow this).

Collectives™ on Stack Overflow

Import scss in react

1 Answer 1

But what is the error says actually?

Update

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

But what is the error says actually?

Update

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related