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.

Answer 1

From React 17

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

1. Install node-sass as a dependency or dev dependency
2. No need to do any config change in webpack
3. 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);
}

Answer 2

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

Answer 3

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

Answer 4

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.