How to configure Shopify Hydrogen V2 with LESS/CSS modules

Question

I am trying to configure Shopify Hydrogen V2 with LESS (or at least CSS) modules, so I can encapsulate component styles that are only loaded on demand.

Desired usage:

import styles from "./style.module.less"

const ComponentName = () => (
  <div className={styles.ComponentName}>Content</div>
);

export default ComponentName;

So far I only found this in the documentation, but it does not seem to be up-to-date: it says you should edit the Vite config file with an experimental feature, but it seems like Hydrogen V2 does not even use Vite anymore as they direct you to remove it.

Has anyone configured it to work? Is there any source I missed?

Ronick Samuel · Accepted Answer · 2023-09-20 14:25:17Z

0

To get access to the CSS bundle, first install the @remix-run/css-bundle package

npm install @remix-run/[email protected] or @remix-run/[email protected]

ensure that the version is the same as your @remix-run/react version else it wont work.

root.tsx

import { cssBundleHref } from "@remix-run/css-bundle";
 import {type LinksFunction} from '@shopify/remix-oxygen';

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

you can also reference To use the built-in CSS Modules support, first ensure you've set up CSS bundling in your application

edited Sep 20, 2023 at 14:25

answered Sep 8, 2023 at 7:05

Ronick Samuel

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to configure Shopify Hydrogen V2 with LESS/CSS modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related