NextJS 模块解析失败：意外字符“@”(7:0)

Question

[ error ] ./node_modules/font-awesome/css/font-awesome.css 7:0
Module parse failed: Unexpected character '@' (7:0)
You may need an appropriate loader to handle this file type, currently no loaders are 
configured to process this file. See https://webpack.js.org/concepts#loaders
| /* FONT PATH
|  * -------------------------- */
> @font-face {
|   font-family: 'FontAwesome';
|   src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');

我已经安装了 next-css，我的 next.config.json 是：

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

Answer 1

来自https://github.com/zeit/next-plugins/issues/432：

将 next-css 与 url-loader、file-loader 和 css-loader 以及 next.config.json 一起安装可以解决这个问题。

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

我还有名为 .next.config.json :P 的 next.config.json 文件，因此使用 next.config.json 应该出现错误ModuleParseError: Module parse failed: Unexpected character ' ' (1:0)。