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

Question

我正在尝试使用 next.js 实现一个 React 元素。我想将一些 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;
  }
});