如何在Shopify Hydrogen V2中使用Sass Modules？

Hydrogen V2基于Remix构建，可借助Remix的CSS处理能力实现你需要的CSS Modules和Sass支持，官方文档未单独提及但实际完全可行：

• CSS Modules 直接使用：无需额外配置，只需将样式文件命名为[name].module.css，在组件中按如下方式导入使用，用法和Next.js完全一致：

  import styles from './product-card.module.css';
  
  export default function ProductCard() {
    return <div className={styles.card}>...</div>;
  }
  

• 添加Sass Modules支持：

  1. 先安装sass依赖：

     npm install sass
     # 或使用yarn
     yarn add sass
     

  2. 在项目根目录的remix.config.js中添加Sass处理配置：

     /** @type {import('@remix-run/dev').AppConfig} */
     export default {
       ignoredRouteFiles: ['**/.*'],
       serverModuleFormat: 'esm',
       serverDependenciesToBundle: ['@shopify/hydrogen'],
       // 新增Sass加载配置
       loaders: [
         {
           test: /\.scss$/,
           use: ['css-loader', 'sass-loader'],
         },
       ],
     };
     

  3. 现在可以创建[name].module.scss文件，导入和使用逻辑和CSS Modules完全相同：

     import styles from './product-card.module.scss';
     

• 注意事项：

  • 需确保css-loader和sass-loader版本与当前Hydrogen/Remix版本兼容，避免编译报错
  • Sass可与Tailwind共存，在Sass文件中正常引入Tailwind的@tailwind指令即可

内容的提问来源于stack exchange，提问作者Joshua Tuscan