Reactjs 圣杯&x2B；反应+；网页字体加载问题

我正在尝试使用webpack创建react应用程序，我已经完成了所有设置，包括sass等，但是当我尝试使用grails设置带有自定义字体的文件加载程序时，在运行

npm start

时，它给了我以下错误

ERROR in ./src/main/webapp/app/assets/sass/application.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/main/webapp/app/assets/sass/application.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../../../fonts/flaticon/Flaticon.eot' in '/directoryStructure/banking/mercury/src/main/webapp/app/assets/sass'

Package.json

"devDependencies": {
    "@babel/cli": "^7.11.6",
    "@babel/core": "^7.11.6",
    "@babel/preset-react": "^7.10.4",
    "@webpack-cli/init": "^0.2.2",
    "css-loader": "^4.3.0",
    "eslint-plugin-react-hooks": "^4.1.2",
    "file-loader": "^6.1.0",
    "sass": "^1.26.11",
    "sass-loader": "^10.0.2",
    "svg-loader": "0.0.2",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }

webpack.config.js

module.exports = {
    module: {
        rules: [
            //Tried solution 1:
            { test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)$/, use: ['url-loader?limit=100000'] },

            //Tried solution 2:
            {
                test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                use: ['file-loader']
            },
        ]
    }
}

目录结构