Check out a free preview of the full Vite course:
The "Injecting CSS" Lesson is part of the full, Vite course featured in this preview video. Here's what you'd learn in this lesson:

Steve explains how to inline CSS styles in a Vite project using a Vite plugin called "vite-plugin-lib-inject-css". They demonstrate how to install the plugin and import it into the project. By doing this, the CSS styles will be bundled together with the module, allowing users to easily import the module and automatically get the associated styles without any additional setup.

Get Unlimited Access Now

Transcript from the "Injecting CSS" Lesson

[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.