CODEWITHSUNDEEP
htmlcssangular
Tanzeel
Tanzeel

Reputation: 5038

How to add SCSS to a component of an angular library

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

Upvotes: 2

Views: 427

Answers (1)

Wang Liang
Wang Liang

Reputation: 4444

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
})

Upvotes: 3

Related Questions