vue不同组件引用同一个css模块如何避免重复引用

在 Vue 中，可以使用 vue-style-loader 和 css-loader 来实现将 CSS 模块化，并在不同组件中共享使用。

具体步骤如下：

安装依赖：

npm install vue-style-loader css-loader -D

在 webpack 配置文件中添加 loader：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }
  ]
}

在组件中使用 CSS：

<template>
  <div class="my-component">
    ...
  </div>
</template>

<script>
  import './my-component.css'
</script>

<style module>
  /* 定义局部作用域的 CSS */
  .my-component {
    ...
  }
</style>

在这种方式下，同一个 CSS 文件只会被加载一次，并且在不同的组件中可以共享使用。同时，使用局部作用域的 CSS 可以避免不同组件之间的样式冲突