Loading
Current section: Styling 7 exercises
Problem

Bundling CSS in Remix

Transcript

00:00 Sometimes, you need to use a library that comes with styles all baked in, and you need to include those styles on the page. Other times, you have some global CSS that you want to have applied on the page, and there are various situations where maybe you'd be writing your own component, and you want

00:19 to co-locate that component with its CSS, but then you have to get that CSS onto the page somehow. And if you did a bunch of components like this, then your links in that root are going to get very, very large, and it's not necessarily terribly bad for the user experience, but it's not the best.

00:37 And so in those situations, it would be really, really handy if the framework could include that link on the page for you. Remix almost does this. It does it actually in a really nice way that we'll talk about. But what I want you to do is we've got ourselves this CSS file that our coworker has put together

00:56 for us. It's a global.css that we need to include on the page, on every page. And so we need to include that in the root, but the way that we're going to do it is by using Remix's bundling capabilities so that we can get that set up for when we start bringing in third-party libraries that need to have their CSS applied on the page.

01:14 And we don't want to import every single one of these and have their own link. We want to just take all of them and stick them together in one CSS file. And so that is the objective of this exercise. You will definitely know when you got this one. It will be very clear when you got this exercise finished. So we'll see you on the other side of the exercise.

01:34 And I am so sorry, but I'm not at all sorry. We'll see you. Have a good time with this one.