Injecting CSS

[00:00:00]
>> The other thing you can do is, we could inject the styles as well. Cuz if I look at my file, I'm not entirely sure that we've got the styles separately. So there is another library for that, injectCSS. We'll do inline-css later. Inject, no, we gotta put the T on there too.

[00:00:24]
There we go. Inject some CSS. Awesome. Import injectCSS. Vite-plugin. And we'll throw that in here as well. Does it [SOUND]. There it is. That's what it's called. All right, cool. So now we're on it again. Nope, not the install. Awesome, so this is index.css. You can see that now, the files will also import the CSS file as well.

[00:01:22]
So now when I pull in the module, it will then pull in the index.css. And we know that then Vite will do the work on the consuming application to then pull them both in at the same time. So now when I pull the module, I also pull in the CSS.

[00:01:37]
Those styles, if we look are scoped, to that module. So now, theoretically, unless I made a boo-boo, gonna happen. If somebody pulls in this module, they're gonna get a styled button the way it should be, right? There's not a whole bunch of stuff they have to have set up.

[00:01:53]
They're gonna get the CSS that isn't imported along with the module as they begin to pull it in.