mini css extract scss issue

webpack.config.js

const path = require("path");
const merge = require("webpack-merge");

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const WebpackBarPlugin = require("webpackbar");

const outputFolder = path.resolve(__dirname, "../public_html/assets");

let config = {
  entry: {
    app: ["@babel/polyfill", "./src/app.js"]
  },
  output: {
    path: outputFolder,
    publicPath: "/",
    filename: "[name].js"
  },
  resolve: {
    alias: {
      "@@": path.resolve(__dirname, "/"),
      "@": path.resolve(__dirname, "src/")
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.vue` files
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          plugins: ["@babel/plugin-proposal-object-rest-spread"],
          presets: [
            [
              "@babel/preset-env",
              {
                useBuiltIns: "entry"
              }
            ]
          ]
        }
      },
      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.vue` files
      {
        test: /\.(sass|scss|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader",
            options: { importLoaders: 3, sourceMap: true }
          },
          {
            loader: "postcss-loader",
            options: { sourceMap: true }
          },
          {
            loader: "resolve-url-loader",
            options: { sourceMap: true }
          },
          {
            loader: "sass-loader",
            options: { sourceMap: true }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "/img/[name].[ext]"
            }
          }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          sourceMap: true,
          map: {
            inline: false, // set to false if you want CSS source maps
            annotation: true
          }
        }
      })
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[name].css"
    }),
    new WebpackBarPlugin({ color: "green", name: "Primary" }),
  ],
  devtool: "source-map"
};

let devConfig = {};
if (process.env.NODE_ENV == "development") {
  devConfig = {
    stats: "errors-only"
  };
}

let mainConfig = merge.smart(config, devConfig);

module.exports = mainConfig;