Vue.js：在导入相同的 css 文件时定义了重复的 CSS 类（CSS 组件）

Question

我正在使用 Vue.js 和 CSS 组件构建一个应用程序。有一些 Vue 组件，它们共享共同的样式。

你好.vue：

<template>
  <div :class="$style.title">Hello, World</div>
</template>
<script>
export default {}
</script>
<style module src="./common.css"></style>

再见.vue：

<template>
  <div :class="$style.title">Goodbye, cruel world.</div>
</template>
<script>
export default {}
</script>
<style module src="./common.css"></style>

common.css：

.title {
  font-weight: bold;
}

当我编译和运行这段代码时，有一个重复的 CSS 类（._2miFMUAEBLdLB9wHpgrYF2）：

Screenshot: Duplicated CSS classes

我该如何解决这个重复？

完整的代码在这里：https://github.com/ryo-utsunomiya/css-modules-common-style

Answer 1

我昨晚只是在研究这个！我仍在努力了解最佳方法，但我会分享我迄今为止发现的内容。

您所拥有的将在开发模式下输出相同的 css 两次，但在生产中，由于 webpack.prod.conf.js 文件中的这一点，它会被重复数据删除。

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
  ? { safe: true, map: { inline: false } }
  : { safe: true }
}),

但是，这仍然会向您的app.js 添加重复的哈希值，以将真实的类名映射到可以快速膨胀的模块类名。即使你命名它也是如此。

我现在倾向于的方法只是在根组件中包含一个通用样式表，该样式表具有简单的非范围非模块样式，并且该组件将在其中使用module 拥有自己独特的样式。您只需使用 common 中的普通类名。

但是，我正在考虑的另一种方法是在我的根组件中执行此操作：

<style module="$commonStyles" src="./common.css"></style>

然后在整个应用程序中提供this.$commonStyles。

我会告诉你我的结局。