Vue+Vite项目CSS Modules类名格式优化配置求助

问题原因 #

你遇到的多余字符串（如-vue-vue-type-style-index-0-lang-module）是因为Vite处理Vue单文件组件时，会给样式文件的[name]变量自动拼接这些后缀标识，导致生成的类名不符合预期。

解决方案 #

通过自定义generateScopedName函数，提取纯净的组件名并生成对应哈希，实现ComponentName__class_hash的格式：

配置代码 #

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  // ...其他配置
  css: {
    modules: {
      localsConvention: "camelCase",
      generateScopedName: (localName, resourcePath, options) => {
        // 提取组件名：移除文件名中.vue及后续的所有后缀
        const componentName = path.basename(resourcePath).replace(/\.vue.*$/, '');
        // 生成与默认规则一致的2位base64哈希
        const hash = options.hash(resourcePath + localName, 2);
        // 拼接成目标格式
        return `${componentName}__${localName}__${hash}`;
      }
    }
  },
  plugins: [vue()]
});

代码说明 #

1. 提取组件名：使用path.basename获取样式文件对应的组件文件名，通过正则/\.vue.*$/移除.vue及之后的所有后缀（如?vue&type=style&index=0&lang=css），得到纯净的组件名称。
2. 生成哈希：利用Vite内置的options.hash方法，基于组件路径和本地类名生成与默认配置一致的2位base64哈希，保证类名的唯一性。
3. 拼接格式：按照ComponentName__class_hash的规则拼接字符串，得到符合需求的类名。

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