Answer a 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.

Answers

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