How to use SASS(SCSS) variables in react component
This article don’t include a theoretical information only implementation. If you are wondering anything, you search google like this. 😎
Anyway, I will continue by assuming that you have ready-made react project with sass.
I talk about our scenario, we create basic component and ghost loading component for it. We have created ghost loading component has some properties and there properties change by our sass variables. That is all 😃
Basic react project(react version ≥ 17) differently extra installed npm packages “sass, sass-loader and react-loading-skeleton”. ‘React-loading-skeleton’ from packages, just installed for show how to use sass variables in react components, so you don’t have to install this package.
Firstly, we created sass file and define variables then export variables we want.
After this if we have react-app-env.d.ts file modify this, if we haven’t created file we create file like this.
Thereafter our App.tsx file modify for this scenario.
You if you ask me why we do this, you see this file we use Skeleton Theme component viz this component has some properties like baseColor and highlightColor. If we want to change this properties by our sass variables this file will show how to do.
After that created required files as follows
Before that there are we defined sass file has properties. We used its for ghost loading(Test Skeleton.tsx). Finally we have got output as follow. All the colors we see here come from sass variables.
