React中CSS Modules驼峰引用与SCSS蛇形类名的实现方法

核心原理 #

CSS Modules 本身内置了 kebab-case（蛇形）类名到 camelCase（驼峰）属性的转换能力，TypeScript 只需配置正确的类型支持，就能识别这种映射关系。

实现步骤 #

1. 构建工具配置（Webpack/Vite） #

• Vite：无需额外配置，Vite 对 CSS Modules 的驼峰转换是默认开启的。
• Webpack：确保 css-loader 的 modules 选项启用驼峰转换，示例配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.module\.scss$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: {
                  camelCase: true, // 同时保留蛇形类名和驼峰属性（默认行为）
                  // 若只想保留驼峰属性，可设置为 'only'
                  // camelCase: 'only'
                },
              },
            },
            'sass-loader',
          ],
        },
      ],
    },
  };
  

2. TypeScript 类型支持 #

添加 CSS Modules 的类型声明，让 TypeScript 识别导出的样式对象结构：

• 在项目根目录或 src/types 下创建 css-modules.d.ts 文件：

  declare module '*.module.css' {
    const classes: Record<string, string>;
    export default classes;
  }
  
  declare module '*.module.scss' {
    const classes: Record<string, string>;
    export default classes;
  }
  

• 确保 tsconfig.json 包含该声明文件路径：

  {
    "include": ["src/**/*", "src/types/css-modules.d.ts"]
  }
  

3. 实际使用示例 #

• SCSS 文件（Example.module.scss）中定义蛇形类名：

  .my-header-row {
    padding: 0;
    font-weight: bold;
  }
  

• 组件中直接用驼峰属性引用：

  import Styles from "./Example.module.scss";
  
  export const Example = () => {
    return (
      <>
        <Row padded={false} className={Styles.myHeaderRow}>
          <Text size={"medium"} weight={"bold"}>
            Sample Content
          </Text>
        </Row>
      </>
    );
  };
  

注意事项 #

• 若设置 camelCase: 'only'，则无法通过 Styles['my-header-row'] 引用蛇形类名，只能使用驼峰形式。
• 使用 Create React App 的项目，默认已配置好 CSS Modules 和驼峰转换，只需确保样式文件命名为 *.module.scss/*.module.css 即可。

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