Question

此问题之前已在多个问题中得到解答，但我担心这些问题都不适合我。

我正在使用来自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

Answer 1

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

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

在你的webpack.config.js中：

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

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

1 个答案: