Rollup+React项目中SCSS模块TS定义文件失效，类名显示undefined

我用Rollup搭建了一个React项目，相关配置与代码如下：

rollup.config.js #

import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import babel from "@rollup/plugin-babel";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import image from "@rollup/plugin-image";
import postcss from "rollup-plugin-postcss";

const isDevelopment = process.env.NODE_ENV === 'development';

const extensions = [".js", ".jsx", ".ts", ".tsx"];

export default {
  input: isDevelopment ? "src/index.tsx" : "src/index.ts",
  output: [
    {
      file: "dist/iife/bundle.js",
      format: "iife", // 本地开发用
      sourcemap: true,
    },
    {
      file: "dist/esm/bundle.js",
      format: "esm", // ESM格式输出
      sourcemap: true,
    },
  ],
  plugins: [
    image(),
    postcss({
      autoModules: true,
      extensions: [".css", ".scss"],
    }),
    nodeResolve({
      extensions,
    }),
    replace({
      preventAssignment: true,
      "process.env.NODE_ENV": JSON.stringify("development"),
    }),
    commonjs(),
    babel({
      babelHelpers: "bundled",
      extensions,
    }),
    serve({
      open: true,
      verbose: true,
      contentBase: ["", "public"],
      host: "localhost",
      port: 3000,
    }),
    livereload({ watch: "dist" }),
  ],
};

我使用typed-scss-modules包为SCSS文件生成TypeScript定义文件：

styles.module.scss #

.test-test {
  color: red;
} 

生成的类型文件：

styles.module.d.ts #

export type Styles = {
  testTest: string;
};

export type ClassNames = keyof Styles;

declare const styles: Styles;

export default styles;

在React组件中引入样式后，styles.testTest传递到DOM时显示为undefined，而非预期的test-test类名：

App.tsx #

import styles from './styles.module.scss';

const App: React.FC = () => {
  return <div className={styles.testTest}>测试内容</div>;
};

修复方案 #

问题出在rollup-plugin-postcss的配置上，虽然开启了autoModules: true，但默认配置未正确处理类名的驼峰转换与导出映射。按以下步骤修改：

1. 替换autoModules为明确的modules配置，强制开启驼峰转换：
   修改postcss插件配置段：

   postcss({
     modules: {
       camelCase: true, // 关键：将短横线命名的类名转为驼峰式（test-test → testTest）
       generateScopedName: "[local]", // 开发环境可选，直接使用原类名方便调试，生产可改为带哈希的格式
     },
     extensions: [".css", ".scss"],
   }),
   

2. 确保typed-scss-modules的生成规则与postcss一致（默认会生成驼峰式类型定义，无需额外修改）。

3. 重新执行打包命令，此时styles.testTest就能正确获取到对应的test-test类名。

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