Hello. I am hoping someone can help me and my team. We are using Stencil to build a design system for our organization. We ran into a possible problem and are looking for guidance.
We were using the global.scss file to load styles that we want to use in all our components. We wanted to use the Bootstrap styles as a basis for our design system, so we included Bootstrap in the global sass. We also included some font definitions, and the Font Awesome icon pack into the global sass.
What we noticed is that this resulted in very large web component payloads. It seems like the entirety of Bootstrap, Font Awesome, and our font definitions were being delivered to the client for every new component that we included on a page. The page size ballooned exponentially. A simple page with a handful of our components ended up being a 5MB load.
So my question is, what are we doing wrong? How are we using global wrong? Is there a setting to flip, or a different approach we should take?