How to Use CSS with Shopify Remix Vite?

CSS (Cascading Style Sheets) is essential in web development to create visually appealing and responsive designs. When building modern applications with Shopify Remix, a framework that enables developers to create fast and efficient full-stack applications, you can leverage Vite for bundling and optimizing your code. Vite offers an excellent development experience by providing features like hot module replacement (HMR) and instant feedback during development.

Vite in Remix refers to using the Vite build tool with the Remix framework. Remix traditionally uses Webpack or its own default build system, but Vite can be used as an alternative bundler to improve build speed and development experience.

Why Vite?

Vite is a next-generation frontend build tool that comes with several benefits:

• Fast Cold Starts: Vite leverages native ES modules, enabling near-instant startup times.
• Hot Module Replacement: With Vite, any change you make to your CSS is reflected immediately without a full-page reload.
• Optimized Builds: Vite automatically optimizes your final production bundle, making it leaner and faster.

Now that we know why Vite is an excellent choice for development, let’s dive into how to use it to manage CSS in Shopify Remix projects.

How to Use CSS with Shopify Remix Vite?

Step 1: First of all you need to remove @remix-run/css-bundle from your app.

Vite has built-in support for CSS side effect imports, PostCSS and CSS Modules, among other CSS bundling features. The Remix Vite plugin automatically attaches bundled CSS to the relevant routes.

The @remix-run/css-bundle package is redundant when using Vite since its cssBundleHref export will always be undefined.

Uninstall @remix-run/css-bundle app using the following command.

npm uninstall @remix-run/css-bundle

Step 2: Remove references to cssBundleHref from your app.root.jsx file.

//app.root.jsx

- import { cssBundleHref } from "@remix-run/css-bundle";
  import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

  export const links: LinksFunction = () => [
-   ...(cssBundleHref
-     ? [{ rel: "stylesheet", href: cssBundleHref }]
-     : []),
    // ...
  ];

Step 3: Fix up CSS imports referenced in links.

If you are referencing CSS in a links function, you’ll need to update the corresponding CSS imports to use Vite’s explicit ?url import syntax.

Add ?url to CSS imports used in links in your route file.

In the below example, we have updated the app.dashboard.jsx file.

//app.dashboard.jsx

-import styles from "~/styles/dashboard.css";
+import styles from "~/styles/dashboard.css?url";

export const links = () => {
  return [
    { rel: "stylesheet", href: styles }
  ];
}

Conclusion

Using CSS in Shopify Remix with Vite provides a flexible and efficient development experience. With features like hot module replacement and dynamic imports, you can create scalable and performant Shopify Remix applications with ease.