如何在Shopify Hydrogen项目中配置Sass模块？

DevOps 小满

2026-8-15

在Shopify Hydrogen中配置Sass模块

1. 安装Sass依赖

在项目根目录执行以下命令安装开发依赖：

npm install -D sass
# 或使用yarn
yarn add -D sass
# 或pnpm
pnpm add -D sass

2. 自定义Vite配置（可选）

Hydrogen基于Vite构建，Vite原生支持Sass，默认无需额外配置。如果需要全局注入变量、配置导入路径等自定义操作，修改项目根目录的vite.config.js：

import {defineConfig} from 'vite';
import hydrogen from '@shopify/hydrogen/plugin';

export default defineConfig({
  plugins: [hydrogen()],
  css: {
    preprocessorOptions: {
      scss: {
        // 全局注入变量文件，无需每个组件单独导入
        additionalData: `@import "./src/styles/variables.scss";`,
        // 配置Sass文件的搜索路径
        includePaths: ['./src/styles'],
      },
    },
  },
});

3. 正确使用Sass文件

普通全局Sass导入

在组件或入口文件中直接导入.scss文件：

// src/components/MyComponent.jsx
import '../styles/global.scss';

export default function MyComponent() {
  return <div className="my-class">示例内容</div>;
}

Sass CSS Modules

若要使用CSS Modules隔离样式，需将文件名命名为[name].module.scss，然后在组件中导入使用：

// src/styles/Button.module.scss
.button {
  padding: 1rem;
  background-color: #0070f3;
  color: #fff;
  border-radius: 4px;
}

// src/components/Button.jsx
import styles from '../styles/Button.module.scss';

export default function Button() {
  return <button className={styles.button}>点击按钮</button>;
}