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.