2

I have built 2 angular component libraries (A and B) each inside their own Angular app. I installed library A in library B. Application B is using both libraries.

The styles of components in library A are not displaying when I render it in Application B. In both libraries, I use the typical Component syntax when referencing a component. 

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
})
export class MyComponent implements OnInit {
  ...

When I look under the Sources tab in Webkit and browse the files I find no evidence of css or scss. Why is my scss not loading? Is there a tsconfig variable or something that I can use for the styles to be included?

Edit: I set ViewEncapsulation to None for a component and the styles are showing on the page. They are being injected into the styles tag in the page header. How do I get the style files to load.

afriedman111
  • 1,925
  • 4
  • 25
  • 42
  • 1
    You're component is using view encapsulation. So the CSS styles are inside the Webpack bundles. You will not find any CSS files being loaded. – Reactgular Dec 13 '19 at 19:12
  • Are you using global styles in your component libraries? Those won't be used in the applications, only the styles actually used inside the components (s)css files. – naeramarth7 Dec 13 '19 at 19:14
  • No, I'm not using any global styles. – afriedman111 Dec 13 '19 at 19:14
  • @Reactgular, this seems to be the problem. Is there anyway to make the styles accessible to all of the components? – afriedman111 Dec 13 '19 at 19:22

0 Answers0