Vue3-style-组件在dom中呈现重复的类

<template>
  <div style="color: red;">Hello World</div>
</template>

<template>
  <div :style="{'color': 'red'}">Hello World</div>
</template>

<template>
  <div class="red-text">Hello World</div>
</template>

<style>
.red-text {
  color: red;
}
</style>

npm install @vue/compiler-sfc @vue/compiler-dom --save-dev

module.exports = {
  runtimeCompiler: true,
  css: {
    requireModuleExtension: false
  },
  configureWebpack: {
    module: {
      rules: [
        {
          resourceQuery: /module/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: '[local]_[hash:base64:8]'
                },
                importLoaders: 1
              }
            }
          ]
        },
        {
          use: [
            'style-loader',
            'css-loader'
          ]
        }
      ]
    }
  }
}

<template>
  <div :class="$style.redText">Hello World</div>
</template>

<style module>
.redText {
  color: red;
}
</style>