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.