reactdatagrid 的 webpack 中的 Css 导入失败

问：

我使用命令添加了 dev 依赖项 -

yarn add @inovua/reactdatagrid-community --save     

当我尝试使用导入其所需的 css 时

import '@inovua/reactdatagrid-community/index.css';

纱线给了我错误 -

ERROR in ./node_modules/@inovua/reactdatagrid-community/index.css 7:0
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  * LICENSE file in the root directory of this source tree.
|  */
> .inovua-react-toolkit-checkbox{-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:center;outline:none;vertical-align:middle}.inovua-react-toolkit-checkbox--inline-block{display:inline-flex}.inovua-react-toolkit-checkbox__icon-wrapper{display:flex}.inovua-react-toolkit-checkbox__icon-wrapper svg{display:block}.inovua-react-toolkit-checkbox--children-position-start{flex-flow:row-reverse}.inovua-react-toolkit-checkbox--rtl{....
.....
.....

我的webpack配置文件：

const fs = require('fs');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VirtualModulesPlugin = require('webpack-virtual-modules');
const RendererResolver = require('./renderer-resolver/index');
const Dotenv = require('dotenv-webpack');
const ESLintPlugin = require('eslint-webpack-plugin');
const webpack = require('webpack');


module.exports = {
  output: {
    path: path.join(__dirname, '/build'),
    publicPath: 'auto',
    filename: '[name].[contenthash].bundle.js'
  },
  optimization: {
    splitChunks: { chunks: "all" },
    runtimeChunk: 'single'
  },
  devServer: {
    compress: true,
    port: 3000,
    client: {
      overlay: { errors: true, warnings: true }
    },
    static: {
      directory: path.join(__dirname, 'public'),
    },
    allowedHosts: ['qa.local'],
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('./provisioning/files/dev_keys/key.pem'),
        cert: fs.readFileSync('./provisioning/files/dev_keys/cert.pem')
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /nodeModules/,
        use: {
          loader: 'babel-loader',
          options: {
            "presets": [
              "@babel/preset-env",
              "@babel/preset-react"
            ]
          }
        }
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader', options: {
              url: {
                filter: (url) => {
                  // Semantic-UI-CSS has an extra semi colon in one of the URL due to which CSS loader along
                  // with webpack 5 fails to generate a build.
                  // Below if condition is a hack. After Semantic-UI-CSS fixes this, one can replace use clause with just
                  // use: ['style-loader', 'css-loader']
                  if (url.includes('charset=utf-8;;')) {
                    return false;
                  }
                  return true;
                },
              }
            }
          },
          "sass-loader",
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      }
    ]
  },
  plugins: [
    new Dotenv({path: (process.env.TARGET_ENV || '') + '.env'}),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV !== "production" ? 'development' : 'production')
    }),
    new ESLintPlugin(),
    new VirtualModulesPlugin({ 'src/renderers.js': RendererResolver() }),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({ filename: "[name].[contenthash].css", chunkFilename: "[id].[contenthash].css", }),
    new CopyWebpackPlugin({ patterns: [{ from: 'public' }] })
  ]
}

相关软件包及其版本：

"devDependencies": {
    "@babel/core": "7.17.5",
    "@babel/eslint-parser": "7.17.0",
    "@babel/preset-env": "7.16.11",
    "@babel/preset-react": "7.16.7",
    "@fortawesome/fontawesome-free": "6.0.0",
    "babel-loader": "8.2.3",
    "copy-webpack-plugin": "10.2.4",
    "css-loader": "6.8.1",
    "dotenv": "16.0.0",
    "dotenv-expand": "8.0.2",
    "dotenv-webpack": "7.1.0",
    "eslint": "8.11.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "6.2.0",
    "html-webpack-plugin": "5.5.0",
    "mini-css-extract-plugin": "2.7.6",
    "sass": "1.49.9",
    "sass-loader": "12.6.0",
    "style-loader": "3.3.3",
    "webpack": "5.70.0",
    "webpack-cli": "4.9.2",
    "webpack-dev-server": "4.7.4",
    "webpack-virtual-modules": "0.4.2"
  },
  "dependencies": {
    "@inovua/reactdatagrid-community": "5.9.3",
......
...... Other dev dependencies.
}

我知道 webpack 无法确定使用哪个加载器来读取 css 文件，但我在我的 weebapck 配置中添加了用于加载 css 的插件和加载器。还有其他软件包的 css 加载得很好。我在这里错过了什么？