How to use scss variables in create react app?

Question

I create my app with create-react-app and I try to use shared scss files. I have folder with them files common/styles/. And also I have some scss files there (_reset.scss, _variables.scss).

My _variables.scss:

$color-main: #1E700F;

My index.scss:

@import "variables";

Then I connect my index.scss and my index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import './common/styles/index.scss';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Then I create Button component in folder common/components/Button. And I want to use in my Button.scss next code:

.button {
  border: 1px solid $color-main;
  color: $color-main;
}

After I import my Button.scss to Button.js file I have next error:

SassError: Undefined variable: "$color-main".

When writing mixins and functions that take arguments, you usually want to ensure that those arguments have the types and formats your API expects. — Michael Nelles
– Michael Nelles, Commented Feb 1, 2020 at 11:12
you may get a solution on simple googling. try that first. we will help you if you get any issue — Akhil Aravind
– Akhil Aravind, Commented Feb 1, 2020 at 11:22

crrmacarse · Accepted Answer · 2020-02-01 11:13:13Z

2

You shouldn't be importing scss in the js file. Instead create a sub folder inside your scss and name it components. Then create a scss file specific for such component which is "button" for you. Then import it like this in your index.scss

@import "variables";
@import "reset";
@import "components/button" <-- your button scss should be under the variables

answered Feb 1, 2020 at 11:13

crrmacarse

1,2461 gold badge10 silver badges24 bronze badges

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

2 Comments

SeyyedKhandon Over a year ago

I guess This will add the all css in the final bundle, which is a bad practice. is there any other way to prevent this?

crrmacarse Over a year ago

check this out: webpack.js.org/plugins/mini-css-extract-plugin

Collectives™ on Stack Overflow

How to use scss variables in create react app?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related