导入css文件以与next.js反应时模块解析失败错误

Question

我正在尝试使用 next.js 实现一个反应项目。我想将一些 css 文件导入到我的文件中，例如 bootstrap 或 font-awesome。但是当我尝试启动服务器时它失败了。

这是错误： 编译失败 ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 1:0 模块解析失败：意外字符 '' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders （此二进制文件的源代码省略）

我看了一些解决方案，有些人说导入方式有问题。但是我尝试了以下两种但结果是一样的。

导入'../node_modules/font-awesome/css/font-awesome.css' 从'../node_modules/font-awesome/css/font-awesome.css'导入css

大多数解决方案都提到了 webpack 的 css-loader 并更改了配置文件。我也已经试过了。我已经安装了这个 npm install --save-dev css-loader 并更改了我的配置文件，但问题没有改变。

这是我的 next.config.js 文件：

const withCSS = require('@zeit/next-css')
module.exports = withCSS({

  webpack: config => {
    config.module.rules.push({

      test: /\.md$/,
      use: "raw-loader",

    },
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    }

    );
    return config;
  }

});

Answer 1

你不需要css-loader，去掉这部分：

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader'],
}

withCss 下一个插件配置所有与 css 导入相关的内容。 该错误特别说明它无法处理 ttf 文件。

使用next-fonts 配置字体加载器。

https://github.com/rohanray/next-fonts

const withFonts = require('next-fonts');
module.exports = withFonts({
  webpack(config, options) {
    return config;
  }
});