How to Include Global Styles in LWC System

Question

I'm working on a customer service system using Salesforce Lightning and the Lightning Web Component (LWC) framework. What's the best way (if any) to include a global stylesheet to create/override styles on the site? Something that will enable control beyond the basic theming, which allows you to change a couple colors and logo, basically.

The closest I've gotten is:

1. Upload my custom stylesheet through the Setup > Static Resources section
2. Create a new special lightning web component that is visually hidden (via display:none for example) and used only to load my custom stylesheet static resource through it's javascript file - doing a connectedCallback() { Promise.all([loadStyle(this,lwcStyleResource)... kind of thing.

This seems to work well, with one caveat -- I have to include this component on any page that I want the styles to apply. I want this to be global and thus apply on every page. So is there a way to somehow include this special component on every page? I'm pretty much a noob to the Lightning system, so I don't know how everything is structured, if there's a main page template I could modify, or what.

Answer 1

Easiest answer would be to wrap your LWC root component within an Aura component and import the style using ltng:require only once, this will automatically cascade the css to all enclosing LWC.