Vite build 生成不同的css模块类

Question

Vite构建过程中生成的index.js文件中是否可以配置CSS模块类名？

我正在使用多个主题和一个单条目 JS 文件。目前，这就是我尝试构建项目时所拥有的：

Index.js
<h1 class="primary_AsDf123">Hello World</h1>

Theme 1 
.primary_AsDf123 {
 color: red;
}

---

Theme 2 
.primary_ZxCv456 {
 color: blue;
}

当我切换到主题2时，问题就出现了，因为元素生成的类与主题2类不同，导致样式不生效。

我希望实现这样的目标，让我可以在多个主题之间切换：

Index.js
<h1 class="primary_AsDf123">Hello World</h1>

Theme 1 

.primary_AsDf123 {
 color: red;
}

---

Theme 2 

.primary_AsDf123 {
 color: blue;
}

这将实现无缝主题切换，同时保持跨主题的类名一致。有没有办法在Vite构建过程中实现这个配置？

我正在寻找一种使用共享选项中的 css.modules 来修复它的方法，但在构建它时没有看。

Answer 1

如果您将主题构建为库，请确保还在

vite.config.ts

属性下的

css

中设置以下内容：

 css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
       ...
      `,
      },
    },
    modules: {
      generateScopedName: "[local]__[hash:base64:5]",
    },
  },