How to import scss file of diagram using React Diagram?

This article explains on how to import scss file of diagram using React Diagram
To import the SCSS file, follow these steps:

1.Create a new React app using the following commands:

• npx create-react-app my-app
• cd my-app

2.Install the Syncfusion® Diagram package

• npm install @syncfusion/ej2-react-diagrams

3.Create the SCSS file inside the src folder by creating a new file with the .scss extension.
4.Install the node-sass package using the command:

• npm install node-sass

5.Add “build-css”: “node-sass --include-path ./src --include-path ./node_modules/@syncfusion src/ -o src/” inside the script tag in package.json.
6.Include the command npm run build-css in your package.json file.
7.Run the command npm run build-css.
8.Now, the styles will be extracted into the app.css file, and you can include the CSS files into your project.
9.Create a .env file at the project root folder with the variable SASS_PATH.
10.Run the command npm install sass.
11.You can override the control styles in Syncfusion® react components by replacing the sass variable values like this,We have override the button style using the scss style.

$primary-color: cyan;
.button-style{
background-color: $primary-color;
}

Conclusion

I hope you enjoyed learning about how to import scss file of diagram using React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our React Diagram and other components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!