如何配置 webpack 以在 React 中加载 glyphicons/font-awesome 图标

IT技术 reactjs twitter-bootstrap-3
2021-04-11 06:57:09

在react项目中使用引导程序时，运行开发环境工作正常。但是当我为包项目运行 npm build 时。显示引导字体错误。

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
Module parse failed: /Users/xx/WorkDir/react-leap/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
    at Parser.pp.raise (/Users/xx/WorkDir/react-leap/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.getTokenFromCode (/Users/xx/WorkDir/react-leap/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)

我的 Webpack 配置

module: {
  loaders: [
    {
      test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
      loader: 'file-loader',
      include: paths
    }
  ]
}

引导版本：

"bootstrap": "3.3.6",
1个回答

我遇到了一个解决方案：

webpack.config.js

 module: {
    preLoaders: [
        {test: /\.js$/, exclude: /node_modules/, loader: 'jshint-loader'}
    ],
    loaders: [
        {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
        {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},
        {test: /\.css$/, loader: 'style-loader!css-loader'},
        {test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
    ]
}

确保安装所有这些加载程序 

npm i jshint-loader style-loader css-loader less-loader url file --save-dev

在您的文件中导入引导程序后

require('bootstrap/less/bootstrap.less');
在我的情况下，fowtawesome.css 文件中的 #iefix 阻止了与测试正则表达式的匹配，您必须从 fowtawesome.css 中删除这些或编辑您的测试正则表达式以包含它们
2021-06-08 06:57:09
其它你可能感兴趣的问题
上一篇react本机上下文和弃用的超级用法 下一篇增量静态再生中的重新验证过程如何工作？