How to use Syncfusion SCSS theme files in the Vite React application?

3 mins read

Integrating Syncfusion SCSS theme files into a Vite React application enhances the visual aesthetics and maintains consistency across the UI components. This guide will walk you through the steps to set up a Vite React application and integrate Syncfusion SCSS theme files.

Setting Up the Vite React Application

Begin by creating a new Vite React application using the following command:

npm create vite@latest

Using the above command will lead you to set up additional configurations for the project, refer to the below image.

Follow the prompts to configure your project. Once the setup is complete, navigate to your project directory and install the necessary dependencies:

cd vite-project
npm install

Adding Syncfusion React Packages

Syncfusion provides a range of React component packages on npmjs.com. To add Syncfusion components to your project, install the desired npm package. For example, to install the React Grid component, run:

npm install @syncfusion/ej2-react-grids –save

Adding Syncfusion React Component

Incorporate the Syncfusion React Grid component into your application by adding the following code to the src/App.jsx file:

import './App.scss'
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';

function App() {
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 },
    { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 }
  ];
  return (
    <GridComponent dataSource={data} width={1000}>
      <ColumnsDirective>
          <ColumnDirective field='OrderID' textAlign="Center"/>
          <ColumnDirective field='CustomerID' textAlign="Center"/>
          <ColumnDirective field='EmployeeID' textAlign="Center"/>
          <ColumnDirective field='Freight' format="C2" textAlign="Center"/>
          <ColumnDirective field='ShipCountry' textAlign="Center"/>
      </ColumnsDirective>
    </GridComponent>
  );
}

export default App;

Installing the SASS Package

To incorporate Syncfusion SCSS themes, you must have the SASS package installed in your project. Install it using the following command:

npm install sass

Importing Syncfusion SCSS Theme Files

To apply the Material3 theme using SCSS styles, import the necessary SCSS files for the Grid component and its dependencies into the src/App.scss file:

@import "../node_modules/@syncfusion/ej2-base/styles/material3.scss";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.scss";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material3.scss";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material3.scss";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.scss";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3.scss";
@import "../node_modules/@syncfusion/ej2-popups/styles/material3.scss";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.scss";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/material3.scss";

Configuring the SCSS pre-processor in Vite

Modify the vite.config.js file to include the SCSS pre-processor configuration:

import { defineConfig } from 'vite';

export default defineConfig({
  // ... other configurations
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: ["node_modules/@syncfusion"]
      }
    }
  }
});

Running the Application

To view your application with the integrated Syncfusion components and themes, run:

npm run dev

Output

You can now see the Syncfusion components styled with the chosen SCSS theme in your Vite React application.

For additional information and advanced configurations, refer to the official Syncfusion documentation:

Did you find this information helpful?

Yes

Comments (0)