mini-css-extract-plugin如何去重

Question

我想自己从零搭建vue项目，顺便学习webpack，但是在打包css遇到在不同文件下引入相同的css，在打包的时候回重复打包文件。如：在main.js中引入app.scss再在app.vue中引入app.scss，打包出来的css就像下面

div {
  font-size: 29px;
  height: 200px; }
div {
  font-size: 29px;
  height: 200px;
}

webpack配置

const webpack = require("webpack")
const path = require("path")
const HTMLWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
  // 确认环境是生产环境或开发环境
  mode: "development",
  // 入口文件
  entry: "./src/index.js",
  // 文件输出配置
  output: {
    // 文件打包输出路径
    path: path.resolve(__dirname, 'dist'),
    // 文件打包输出的名字
    filename: "[name].js"
  },
 devServer: {
    port: 3000,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{
          loader: MiniCssExtractPlugin.loader
        }, "css-loader"]
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"]
      },
      {
        test: /\.(jpg|png|gif)$/i,
        use: [{
          loader: "url-loader",
          options: {
            limit: false,
          }
        }]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      // 生成html文件名
      filename: "index.html",
      // 要进行编译的html
      template: "./src/index.html"
    }),
    // vue-loader插件配置
    new VueLoaderPlugin(),
    // 将css打包抽离
    new MiniCssExtractPlugin(
      {
        filename: "./css/[name].css",
        chunkFilename: '[id].css',
      }
    )
  ]
}

在网上找了很久也没有到达答案，求教！！！