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

Posted 2023-02-23

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

【英文标题】：Vue.js: Duplicated CSS class(CSS Component) is defined when import the same css file

【发布时间】：2018-05-01 08:06:30

【问题描述】：

我正在使用 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

【问题讨论】：

只是猜测：在使用组件的页面中包含 CSS 文件，而不是在组件本身中？

感谢您的建议。实际上，$style 的作用域是组件。我们必须以某种方式将父组件的 $style 注入子组件（就像 Bill Criswell 的想法：this.$commonStyles）。

【参考方案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。

我会告诉你我的结局。

【讨论】：

OptimizeCSSPlugin 是我想要的。太好了！