Font Awesome，带有 url/file/-loader 的 Webpack答案

【问题标题】：Font Awesome, Webpack with url/file/-loaderFont Awesome，带有 url/file/-loader 的 Webpack
【发布时间】：2017-11-25 21:36:26
【问题描述】：

这个问题之前已经在多个问题中得到了回答，但恐怕没有一个对我有用。

我正在使用来自 node_modules 的 font-awesome

我想做的就是这个

import 'font-awesome/css/font-awesome.css'

这是我的 Webpack 代码

webpackConfig.module.rules.push(
 {
   test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
   loader: "url-loader?limit=10000&mimetype=application/font-woff"
 },
 {
   test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
   loader: "file-loader"
 }
)

错误，请注意我在 font-awesome 中的所有不同字体都收到相同的错误

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: /Users/valoster/Projects/app-ui/node_modules/url-loader/index.js?limit=10000&mimetype=application/font-woff!/Users/valoster/Projects/app-ui/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 Unexpected token (1:15)
You may need an appropriate loader to handle this file type.
| export default = __webpack_public_path__ + "af7ae505a9eed503f8b8e6982036873e.woff2";
@ ./node_modules/css-loader?{"sourceMap":true,"minimize":true}!./node_modules/postcss-loader/lib?{"plugins":[{"version":"5.2.17","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"cssnano","postcssVersion":"5.2.17"}]}!./node_modules/font-awesome/css/font-awesome.css 6:244-297
@ ./node_modules/font-awesome/css/font-awesome.css

【问题讨论】：

标签： reactjs webpack font-awesome

【解决方案1】：

您正在尝试导入.css 文件，因此您需要使用css-loader。

命令行： yarn add css-loader --dev

在你的 webpack.config.js 中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
},

【讨论】：