2

I am using create-react-app for a new project. I have installed node-sass and everything is working. I have one variables.scss file in a styles folder that is at the root of the src folder. I want to be able to use the variables in this file across all the component style files of the app.

I don't like the approach of importing the variables.scss file to each component's scss file. I want to be able reference the variables anywhere in the app and get the values. But so far, I have not been able to find a good resource that shows how to do this without ejecting create-react-app.

  - src/
      - styles/ 
        - variables.scss
      - App.js
      - App.scss
      - features/
        - home/
          - home.scss
          - Home.js
      - index.js
      - index.scss

For instance, if I need to use a variable in the home.scss file, I should not be importing the variables.scss file. Instead, I could just reference the name of the variable.

Please let me know what is possible.

pro
  • 792
  • 7
  • 30

0 Answers0