Vite+Vue中CSS Modules类名生成配置失效问题求助

问题重现 #

在React项目中曾使用以下CSS Modules配置，能生成包含组件目录、类名、哈希和行号的作用域类名，方便快速定位样式位置：

css: {
  modules: {
    generateScopedName(name, filename, css) {
      const classNameIndex = css.indexOf(`.${name}`);
      const lineNumber = css.substr(0, classNameIndex).split(/\r?\n/).length;
      const hash = crypto.createHash('sha1').update(css).digest('hex').substring(0, 5);

      const items = filename.split('/');
      return `${items[items.length - 2]}__${name}_${hash}-${lineNumber}`;
    },
  },
}

但直接迁移到Vue项目后出现两个问题：

1. 生成的类名异常，例如SomeComponent.vue中的test类会变成：

SomeComponent.vue?vue&type=style&index=0&lang.module__test__70HHG

2. 浏览器渲染时样式完全不生效。

核心原因 #

Vue的单文件组件（SFC）会给样式文件的文件名附加?vue&type=style&xxx这类查询参数，原React配置未处理该情况，导致文件名解析错误；同时Vue传递的css参数是当前样式块的独立内容，原行号计算逻辑不适用。

修复方案 #

1. 清理文件名的查询参数 #

先剥离文件名后的Vue专属参数，才能正确解析组件所在目录：

const cleanFilename = filename.split('?')[0];
const items = cleanFilename.split('/');

2. 修正行号计算逻辑 #

直接在当前样式块中定位类名所在行，无需从完整CSS中查找：

// 查找类名所在行，+1是因为数组索引从0开始
const lineNumber = css.split(/\r?\n/).findIndex(line => line.includes(`.${name}`)) + 1;
// 处理类名未找到的边界情况
const safeLineNumber = lineNumber > 0 ? lineNumber : 1;

3. 完整适配后的配置 #

以Vite + Vue3为例，完整配置如下：

import crypto from 'crypto';

export default {
  css: {
    modules: {
      generateScopedName(name, filename, css) {
        // 清理Vue附加的查询参数
        const cleanFilename = filename.split('?')[0];
        const items = cleanFilename.split('/');
        // 获取组件所在目录名（假设组件放在单独目录中）
        const componentDir = items[items.length - 2];
        
        // 计算类名所在行号
        const lineNumber = css.split(/\r?\n/).findIndex(line => line.includes(`.${name}`)) + 1;
        const safeLineNumber = lineNumber > 0 ? lineNumber : 1;
        
        // 生成哈希值
        const hash = crypto.createHash('sha1').update(css).digest('hex').substring(0, 5);
        
        return `${componentDir}__${name}_${hash}-${safeLineNumber}`;
      },
    },
  },
};

如果是Vue CLI项目，将上述逻辑放在vue.config.js的css.modules配置下即可。

4. 额外注意事项 #

• 确保Vue单文件组件的样式标签添加了module属性：<style module>
• 若使用SCSS等预处理器，行号计算可能因预处理逻辑略有偏差，可根据实际调整匹配规则

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