Webpack不会从node_modules的vue组件中将CSS提取到常规文件

Question

在将Webpack 4配置为与从node_modules文件夹连接的vue组件一起使用时，css不会进入常规的“ app.css”文件。但与此同时，我编写的组件也在运行。如何更改配置，以便将所有组件的样式收集到一个文件中？

组件连接示例

import vSelect from 'vue-select';
Vue.component('v-select', vSelect);

webpack.common.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  entry: ['./src/js/app.js', './src/sass/app.scss'],
  module: {
    rules: [{
        test: /\.(png|jpeg|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'resources',
          name: '[folder]/[name].[ext]',
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'resources/fonts',
          name: '[folder]/[name].[ext]',
        }
      },
      {
        test: /\.css$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
                sourceMap: true
            }
          },
          "postcss-loader",
        ],
      },
      {
        test: /\.scss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
                sourceMap: true
            }
          },
          "postcss-loader",
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          },
        ],
      },
      {
        test: /\.sass$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
                sourceMap: true
            }
          },
          "postcss-loader",
          {
            loader: 'sass-loader',
            options: {
              indentedSyntax: true,
              sourceMap: true
            }
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          esModule: true,
          extractCss: true,
        }
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'res': path.join(__dirname, './src/resources'),
      'root': path.join(__dirname, './src/js')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/app.css",
    }),
    new VueLoaderPlugin()
  ],
}

webpack.dev.js

const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/app.js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  },
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
});

webpack.prod.js

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');


module.exports = merge(common, {
  output: {
    path: path.resolve(__dirname, '.././static'),
    filename: 'js/app.js',
    publicPath: '/static/',
    chunkFilename: 'js/[name].js'
  },
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({}),
      new UglifyJsPlugin({
        sourceMap: true,
      })
    ]
  },
});