javascript - SASS styles injected by innerHTML don't work

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>

question from:https://stackoverflow.com/questions/65602798/sass-styles-injected-by-innerhtml-dont-work

Answer 1

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

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