在react with next.js中导入css文件时模块解析失败错误

我正在尝试使用next.js实现react项目。我想导入一些css文件到我的文件，如引导或字体真棒。但当我尝试启动服务器时失败了

以下是错误： 未能编译 ./node_modules/font awesome/font/fontsawesome webfont.ttf？v=4.7.0 1:0 模块分析失败：意外字符“”（1:0） 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看见 （此二进制文件的源代码省略）

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

导入“../node\u模块/font-awesome/css/font-awesome.css” 从“../node\u modules/font awesome/css/font awesome.css”导入css

大多数解决方案都是关于webpack的css加载器和更改配置文件。我也试过了。我已经安装了这个npm安装——保存开发css加载器并更改了配置文件，但问题没有改变

下面是我的下一个.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;
  }

});

---

您不需要

css加载程序

，请删除此部分：

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

withCss

next插件配置所有与css导入相关的插件。 该错误明确说明它无法处理ttf文件

用于配置字体加载程序

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

---

谢谢你的努力，但问题没有解决。我猜next.js在css加载程序上有问题。下一步在9.2版本中添加了对css模块的本机支持，试试看。

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