How to use SCSS variables into my React components

reactjs sass node-sass
abaracedo picture abaracedo · Oct 19, 2018 · Viewed 12.2k times · Source

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

Santosh Kumar picture Santosh Kumar · Jan 2, 2020

enter image description hereIf you don't want to use styled-component or css-vars, then you can follow this link. https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

Related questions

how to include sass file in reactjs

I use browserify to transform my code now getting error while the sass files were getting imported @import parse error Can any one help me to sort this issue how to use and integrate

Read More
Module not found: Can't resolve 'style'

I am trying to configure css modules using sass. I have followed some tutorials but none seem to work. The webpack config was mostly created by create-react-scripts. I seemed to getting this error "Module not found: Can't resolve 'style'" Any …

Read More
target first-child css styled-components

I am using styled-components and want to target the first child of Text, but am unable to do so. const Text = styled.p` font-size: 12px; &:first-child { margin-bottom: 20px; } `; ... component return( <div> <p>I am just …

Read More