Bundling CSS
Loading "Bundling CSS in Remix (๐ solution)"
Run locally for transcripts
๐งโโ๏ธ Did I getcha!? ๐๐คฃ
๐จโ๐ผ Great work, now we can easily add bundled CSS for our apps. This applies not
only to CSS from component libraries that we import, but also to our own CSS
components. Additionally, Remix has built-in support for
CSS Modules and
Vanilla Extract the CSS of which will also
appear in the bundle. So, included in the CSS bundle will be:
๐งโโ๏ธ I'm going to make a couple changes to make the homepage look nicer. Feel free
to check the diff if you'd like!
๐ฆบ When you use Array.filter(Boolean) in your own code, you might notice a
different behavior, from what you've just seen in the solution. Typescript is
still yelling at you ๐ฎ. That's because Typescript doesnโt play well with
Array.filter(Boolean). To tackle this problem we use
Matt Pocock's handy library ts-reset.
๐ฆ If you're curious about why we don't just use the bundle solution for all our
CSS files (like tailwind and the fonts), watch this tip from Kent:
Loading "Do Not Bundle All Your CSS"
Run locally for transcripts