NextJS 模块解析失败:意外字符“@"(7:0) [英] NextJS Module parse failed: Unexpected character '@' (7:0)

问题描述

[ 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是:

I've installed next-css, my next.config.json is:

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

推荐答案

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

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

Installing next-css in conjunction with url-loader, file-loader and css-loader with the next.config.json fixes the problem.

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) 代替.

I also had my next.config.json file named .next.config.json :P, so with next.config.json the error should be ModuleParseError: Module parse failed: Unexpected character ' ' (1:0) instead.

这篇关于NextJS 模块解析失败:意外字符“@"(7:0)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！