How to import Syncfusion Theme studio custom CSS file in angular

Question

How to include the custom scss files we download from Syncfusion Theme Studio into angular cli?

The site recommends adding the URL to the styles section in angular.json. Is there a way to avoid doing that and import it into styles.scss. I have tried by adding:

@import './scss/themestudio/multiselect-bootstrap4-202104281445211345-8b09079-/bootstrap4.scss';

It doesn't work.

score 0 · Accepted Answer · answered Apr 29 '21 at 06:15

0

You could just copy/paste the new css or scss content directly into your existing styles.scss file

answered Apr 29 '21 at 06:15

null canvas

10,201
2
15
18

i did but the changes doesnt apply – Paul Thomas Apr 29 '21 at 06:17
copy the actual css styles not the `import` statement – null canvas May 01 '21 at 07:44

score 0 · Answer 2 · answered May 07 '21 at 05:21

We have created sample for your reference that you can get from the following link.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-sync-343293087

We request you to just include the downloaded SCSS file from Theme Studio and copy the file into the application repo. Also, need to modify our “angular.json” as in following code snippet.

"styles": [
              "src/styles.scss",
              "src/style/material.scss"
            ],

Please get back to us if you have any queries.

How to import Syncfusion Theme studio custom CSS file in angular

2 Answers2