由innerHTML注入的SASS styles不起作用

Question

I want to inject style to div in component. My issue is it's scss and in application we use scss but style does not want to work. When inject the same style as css one. Everything works fine. The question is how can I force my component to execute style like this? Is it even possible or should I convert scss style to css one?

HTML.TS

  <div id="myExampleId">
    <div #htmlContainer [innerHtml]="htmlToDisplay | safehtml"></div>
  </div>

Style to display in component:

 <style> #myExampleId { table { border-collapse: collapse; width: 100%; } th{ background-color:#fe996b; } td, th { border: 1px solid #999; padding: 0.5rem; text-align: left; } body { background-color: #fe996b; } } </style>

Answer 1

Import the styles not in the template but in the component itself.

Look in Angular docs https://angular.io/guide/component-styles