Grails + React + Webpack字体加载问题

问题描述

我正在尝试使用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']
            },]
    }
}

目录结构

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）