我尝试在我的spfx应用程序中使用devextreme datagrid，但我无法加载webpack处理程序。请给我正确的方向。我尝试了不同的方法来将处理程序包含在module.export中，但没有一种方法能帮上忙。
下面是我的gulpfile.js文件：

'use strict';

const build = require('@microsoft/sp-build-web');
//const path = require('path');

module.exports = {
  module: {
    rules:[
      { 
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff|woff2|ttf|eot)$/,
        use: 'file-loader?name=fonts/[name].[ext]!static'
      }
    ]
  }
}

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

build.initialize(require('gulp'));
build.tslintCmd.enabled = false;

我已经安装了css-loader、style-loader、url-loader和file-loader。

{
  "name": "search-based-list-view-webpart",
  "version": "0.0.2",
  "private": true,
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@devexpress/dx-react-core": "^3.0.4",
    "@devexpress/dx-react-grid": "^3.0.4",
    "@devexpress/dx-react-grid-material-ui": "^3.0.4",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@microsoft/rush-stack-compiler-4.2": "^0.1.2",
    "@microsoft/sp-core-library": "1.14.0",
    "@microsoft/sp-lodash-subset": "1.14.0",
    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
    "@microsoft/sp-property-pane": "1.14.0",
    "@microsoft/sp-webpart-base": "1.14.0",
    "@mui/material": "^5.9.0",
    "@pnp/graph": "^3.4.1",
    "@pnp/sp": "^3.4.1",
    "@pnp/spfx-controls-react": "3.8.1",
    "devextreme": "22.1.3",
    "devextreme-react": "22.1.3",
    "office-ui-fabric-react": "7.174.1",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
    "@microsoft/sp-build-web": "1.14.0",
    "@microsoft/sp-module-interfaces": "1.14.0",
    "@microsoft/sp-tslint-rules": "1.14.0",
    "@types/react": "16.9.51",
    "@types/react-dom": "16.9.8",
    "@types/webpack-env": "1.13.1",
    "ajv": "~5.2.2",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "gulp": "~4.0.2",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1"
  }
}

在.tsx文件中，我尝试导入css文件，如下所示：

import 'devextreme/dist/css/dx.light.css';

无论我怎么尝试，当我尝试做大口发球时，我得到以下错误

Error - [webpack] 'dist':
./node_modules/devextreme/dist/css/icons/dxicons.woff2 1:4
Module parse failed: Unexpected character ' ' (1:4)
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
(Source code omitted for this binary file)
 @ ./node_modules/devextreme/dist/css/dx.light.css (./node_modules/@microsoft/spfx-heft-plugins/node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./node_modules/devextreme/dist/css/dx.light.css) 4:38-70
 @ ./node_modules/devextreme/dist/css/dx.light.css
 @ ./lib/webparts/searchBasedListViewWebpart/components/SearchBasedListViewWebpart.js
 @ ./lib/webparts/searchBasedListViewWebpart/SearchBasedListViewWebpartWebPart.js