How to use SCSS variables into my React components

Question

I am working on a React project that follows this structure

src |
  components |
    Footer |
      index.jsx
      styles.scss
    Header |
      index.jsx
      styles.scss
    scss |
      helpers.scss
      variables.scss
      ...
    main.scss

Into my variables file I was using the css custom variables so, all them where on :root and I can access them in my components styles.

When I wanted to create the dark colours I wanted to use the SCSS function darken, but it does not evaluate them and throws an error saying that var(--blue) is not a valid colour.

As a solution I decided to move all the variables into a SCSS variables but when project is building it throws another error that says that a $blue is not defined.

The unique solution possible I can use, it is to include the variables file in all the styles files but, I do not know if there are a better solution for the structure that I am using.

I know this question is 3 years old, but anyone looking for an up-to-date solution might find [my answer to a similar question](https://stackoverflow.com/questions/66119188/how-to-get-scss-variables-into-react/66120027#66120027) helpful as it addresses the necessairy options for css-loader. — Martin, Dec 05 '21 at 11:50

Nisharg Shah · Answer 1 · 2021-08-28T10:48:25.907

28

From React 17

To access your scss variables into the react component, you need to do something like that

Install node-sass as a dependency or dev dependency
No need to do any config change in webpack
import as a module <-- main point

variables.module.scss

$color: skyblue;
$primaryColor: red;

:export {
    color: $color;
    primary-color: $primaryColor;
}

App.js

import variables from '<YOUR_PATH>/variables.module.scss';

const App = () => {
    console.log(variables);
}

edited Aug 28 '21 at 10:48

answered Jan 02 '21 at 08:51

Nisharg Shah

16,638
10
62
73

This is not tied to React 17 and will work in any React version. – Martin Mar 29 '22 at 12:58

Santosh Kumar · Accepted Answer · 2021-07-01T00:03:31.503

13

If you don't want to use styled-component then you can follow this link. https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

edited Jul 01 '21 at 00:03

answered Jan 02 '20 at 01:11

Santosh Kumar

1,756
15
24

the file shall be called variables.module.scss – StackExploded May 29 '23 at 16:36

score 6 · Answer 3 · answered Oct 19 '18 at 22:45

6

I use a similar structure to organize my .scss files. I like having the styles in the same folder as the component. However, I import all scss files to my main.scss file. This helps avoid style conflicts in the DOM.

main.scss

import "./scss/helpers.scss"
import "./variables.scss"
import "./Footer/style.scss"
import "./Header/styles.scss"

Make sure to name your files with an underscore so that all the files get merged on compilation. Note you don't need to name the underscore in the import.

_helpers.scss
_variable.scss
_style.scss

Using this method you only need to import styles once into your app. index.jsx

answered Oct 19 '18 at 22:45

Matt

1,388
15
16

1

Doing this allows using code splitting? What happens if you have a very big project? – abaracedo Oct 20 '18 at 07:18
1

I do this with very large projects. I like having small scss files right next to their components. As far as performance. What I have found with other systems is often there are DOM conflicts where one css style overrides the other. Using partials there is no styles overwritten in the DOM. – Matt Oct 22 '18 at 15:09

score 1 · Answer 4 · answered Oct 19 '18 at 22:22

There are different ways I can recomend you to tackle this.

1- Duplicate the values of those variables. Add them both on your variables.scss and as constants in some other file, maybe config.js or constants.js that way you'll be able to reference these values from your react components, the downside to this, is you'll have to remember to change them in two places if you have to modify the value.

2- Consider using styled-components. With styled components you can define your styles within your components, using variables or props within the styles.

3- Use some mechanism to define these variables in a single file or as environment variables, and setup your build process to be able to import these values into js and scss files.

I will look into the styled components. – abaracedo Oct 20 '18 at 07:19 — abaracedo, Oct 20 '18 at 07:19
first alternative is bad advice! – Dejan.S Sep 18 '19 at 10:25 — Dejan.S, Sep 18 '19 at 10:25

score 0 · Answer 5 · answered Oct 26 '18 at 23:29

It is possible to use custom variables with that project structure using css-vars mixin.

After proposing the option to evaluate custom variables before executing the SCSS function, a guy suggested me this mixin. I have just tested and works pretty nice.

How to use SCSS variables into my React components

5 Answers5

Linked