如何使用 LESS/CSS 模块配置 Shopify Hydrogen V2

Question

我正在尝试使用 LESS（或至少 CSS）模块配置 Shopify Hydrogen V2，因此我可以封装仅按需加载的组件样式。

所需用途：

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

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

export default ComponentName;

到目前为止我只在文档中找到了这个，但它似乎不是最新的：它说你应该使用实验性功能编辑 Vite 配置文件，但看起来 Hydrogen V2 甚至没有使用不再 Vite，因为他们指示您将其删除。

有人配置它可以工作吗？有没有我错过的来源？

Answer 1

要访问 CSS 包，请首先安装 @remix-run/css-bundle 包

npm 安装@remix-run/css-bundle

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 }]
  : []),
  // ...
 ];
};

您还可以参考 要使用内置 CSS 模块支持，首先确保您已在应用程序中设置 CSS 捆绑