How to use SCSS in Syncfusion React Component?

Overview

This article is about using SCSS files in a React application, created using the “create-react-app” utility.

Prerequisite

• Node
• NPM
• Create React App
• Node SASS

Installing Node & NPM

For installing Node.js on your machine, download the LTS (Long Time Support) version of windows setup from the following link.

https://nodejs.org/en/

NPM (Node Package Manager) will be installed automatically along with the Node.js setup.

Installing Create React App

Install the “create-react-app” utility package using the following NPM Command.

npm install -g create-react-app

Creating React Application

Use the following command to create react application.

Installing Node Sass Package

You can install the “node-sass” package using the following command.

npm install node-sass --save

Create .env file

Create .env file in the root directory of the React application for set SASS include path variables.

Rename the “.css” to “.scss”

Rename all the CSS file extension with SCSS file extension.

Customizing Syncfusion Theme using the SCSS Variables

Now, you can customize the Syncfusion theme using the SCSS variables as follows. 

$accent: blue;
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.scss";

You can refer the Syncfusion documentation to integrate Syncfusion React components into a React application.

Run the application

Now, run the application using “npm run start”.

npm run start

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-react-154008663