如何将 css/scss 文件从 node_module 导入一个类（用于更改组件的主题）

Question

I use syncfision components. I want this component to use the Dark theme when the app-dark class is on the div. I need to import two themes but they should be used in each case like the following:

@import '../../../../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

.app-dark {
  @import '../../../../node_modules/@syncfusion/ej2-angular-grids/styles/material-dark.css';
}

this is the my imports and .scss file .

This is the wrong styling and the compiler will get it wrong. But how can I do what I want to do?

Answer 1

We tried to import “.scss”file as you mentioned in earlier update but we are facing some compilation issues. The inner level imports are not included in the destination css file and we raised a query to “gulp-sass” team. We will validate and update further details after we get reply from “gulp-sass” team.

We have shared a reported bug link for your reference below,

https://github.com/dlmanning/gulp-sass/issues/757

Meanwhile, we suggest you to refer below kb to change theme dynamically,

KB- https://www.syncfusion.com/kb/10868/dynamic-theme-change

Sample - https://github.com/SyncfusionExamples/EJ2-Angular-Dynamic-theme-Switch