前言

这两天使用 React 和 Vite 搭建了个项目，其中用到了 CSS Modules ，出现了这样的情况：

style.module.sass ：

.user-info {
  display: block;
}

index.tsx ：

const UserInfo: React.FC = () => {

  return (
    <div className={style.['user-info']}></div>
  );
};

上面不是我想要的结果，我想要在样式文件中书写 kebab-case 格式的 class 名称，同时在组件中使用 camelCase 格式，如何实现？

另外，除了让构建工具生效外，还要让 vscode 提示 userInfo 。

注意这里的 style.['user-info'] ，因为 JS 中不支持在 . 后使用 kebab-case 格式，因此自动帮我们使用单引号括住了，同时 vscode 的提示内容也是 user-info ：

如果没有提示，可以考虑安装 CSS Modules 插件：

操作

修改构建工具配置

对于 webpack ，修改 webpack 的配置文件中的 css-loader 相关配置：

cssLoader: {
  localsConvention: 'camelCase',
},

对于 vite ，修改 vite 的配置文件：

css: {
  modules: {
    localsConvention: 'camelCase',
  },
},

修改 vscode 相关插件的配置

打开 vscode 的配置文件 settings.json ，添加如下内容：

"cssModules.camelCase": true

重启 vscode ，这时就看到想要的提示了：