类名生成在 Vite 和 Vue 中不起作用

Question

在 React 项目中，我使用了这个配置：

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中不起作用。

例如，如果您选择在

 中生成的 

test

 中的 

SomeComponent.vue

类

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

用这个方法。此外，在浏览器中渲染时不再应用该样式。

有什么解决办法吗？

Answer 1

感谢@EstusFlask 的建议！我尝试了

vite-plugin-pretty-module-classnames

，它可以在Vue中工作，但它不像我的React配置那样显示行号。尽管如此，这还是一个进步。