如何使用webpack从node_modules导入CSS

如何解决如何使用webpack从node_modules导入CSS

我已经开始从现有工具包https://material-ui.com/store/items/devias-kit-pro/构建应用程序。我已将其更改为使用webpack.config.js，这似乎正常工作。但是，似乎没有导入来自node_modules的css文件。例如，index.js文件通过以下方式导入css：

import 'react-perfect-scrollbar/dist/css/styles.css';

，但不应用CSS。我怀疑如下所示的Webpack配置有问题：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');

const SRC_DIR = path.join(__dirname,'/src');
const PUB_DIR = path.join(__dirname,'/public');
const disT_DIR = path.join(__dirname,'/dist');


module.exports = {
entry: { main: `${SRC_DIR}/index.js` },output: {
 path: disT_DIR,chunkFilename: '[chunkhash].chunk.js',publicPath: '/'

},resolve: {
 alias: {
   src: path.resolve(__dirname,'src/')
 }
},module: {
 rules: [
   {
     test: /\.js$/,exclude: /node_modules/,use: ['babel-loader','source-map-loader'],},{
     test: /\.(png|jpg)$/,use: {
       loader: 'url-loader',{
     test: /\.scss$/,use: [
       'style-loader',MiniCssExtractPlugin.loader,'css-loader','sass-loader',],{
     test: /\.css$/,use: [
       { loader: 'style-loader' },{
         loader: 'css-loader',options: {
           modules: true
         },{ loader: 'sass-loader' }
     ]
   }
 ],optimization: {
 splitChunks: {
   cacheGroups: {
     css: {
       test: /\.(css|sass|scss)$/,name: 'commons',chunks: 'all',minChunks: 2,enforce: true,plugins: [
 new CleanWebpackPlugin({
   cleanAfterEveryBuildPatterns: ['dist'],}),new MiniCssExtractPlugin({
   filename: 'style.[contenthash].css',new HtmlWebpackPlugin({
   inject: true,title: 'React-Redux-Webpack-Starter-Kit',template: `${PUB_DIR}/index.html`,filename: 'index.html',favicon: `${PUB_DIR}/favicon.ico`,Meta: {
     viewport: 'width=device-width,initial-scale=1,shrink-to-fit=no',new WebpackMd5Hash(),new Dotenv(),devtool: 'source-map',devServer: {
 port: 3003,historyApiFallback: true,open: true,watchOptions: {
   poll: true,ignored: '/node_modules/'
 }
},};

任何解决该问题的建议将不胜感激。