How to add SCSS to a component of an angular library

user_11163977 0
Viewed 84

I've created a library in angular 6. The problem is that styling is not applied. Here is my code:

mycustom.component.html

<div class="cutom-div">
    Hello
</div>

mycustom.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "lib-mycustom",
  templateUrl: "./mycustom.component.html",
  styleUrls: ["./mycustom.component.scss"],
})
export class MycustomComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

mycustom.component.scss

.custom-div {
    background: red;
    height: 20px;
}

This was supposed to be simple. But there's no styling applied. I inspected the element also:

enter image description here

enter image description here

What else I'm missing out here. Please point out my mistake.

I'm building the library normally:

ng build my-library and then cd dist\my-library>npm pack

angular css html
1 Answers

https://angular.io/api/core/ViewEncapsulation#None

None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This mode is essentially the same as pasting the component's styles into the HTML.

@Component({
  selector: "lib-mycustom",
  templateUrl: "./mycustom.component.html",
  styleUrls: ["./mycustom.component.scss"],
  encapsulation: ViewEncapsulation.None, // <- This need use for global style
})
user_113437200
Related