在react项目中使用bootstrap时,运行dev环境工作正常。但是当我为软件包项目运行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",
我遇到了一个解决方案:
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');