How to import scss file of diagram using Angular Diagram?

This article explains on how to import scss file of diagram using Angular Diagram.
To import the SCSS file, follow these steps:
1.Create a new Angular project using the following commands:

• npm install -g @angular/cli
• ng new my-app
• cd my-app

2.Install the Syncfusion® Diagram package:

• npm install @syncfusion/ej2-angular-diagrams

3.Import the diagram module in app.module.ts

• import { DiagramModule } from ‘@syncfusion/ej2-angular-diagrams’;
• @NgModule({
  declarations: [
  AppComponent
  ],
  imports: [
  BrowserModule,
  DiagramModule
  ],
  providers: [],
  bootstrap: [AppComponent]
  })

4.Create the SCSS file by creating a new file with the .scss extension.
5. In your app.component.scss file, import the SCSS files from the Syncfusion® package (eg: @import ‘…/node_modules/@syncfusion/ej2-angular-diagrams/styles/material.scss’).
6. To avoid SCSS compilation issues and map the SCSS file path, add the following configuration to the angular.json file:

"stylePreprocessorOptions": {

             "includePaths": [

             "node_modules/@syncfusion"

            ]

 },

7.You can override the control styles in Syncfusion® Angular components by replacing the SASS variable values. For example, to override the button style:

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

8.Refer the below sample and documentation for more details.

https://ej2.syncfusion.com/angular/documentation/common/how-to/sass#sass-variables-location

Conclusion

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

You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Diagram example to understand how to create 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 other controls.

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