Ошибка разбора модуля при импорте файла css в ответ на следующий. js - PullRequest
Новая
       7

Ошибка разбора модуля при импорте файла css в ответ на следующий. js

0 голосов
/ 15 января 2020

Я пытаюсь реализовать реактивный проект с использованием следующего. js. Я хочу импортировать некоторые css файлы в мой файл, например bootstrap или font-awesome. Но происходит сбой при попытке запустить сервер.

Вот ошибка: не удалось скомпилировать ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 1: 0 Разбор модуля fail: неожиданный символ '' (1: 0) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts#loaders (Исходный код пропущен для этого двоичного файла)

Я посмотрел некоторые решения, и некоторые говорят, что есть проблема с импортом пути. Но я попробовал оба следующих варианта, но результат тот же.

import '../node_modules/font-awesome/css/font-awesome.css' import css from '../ node_modules / font-awesome / css / font-awesome. css '

Большинство решений говорят о загрузчике css веб-пакета и изменяют файл конфигурации. Я уже попробовал это также. Я установил npm install --save-dev css -loader и изменил мой конфигурационный файл, но проблема не изменилась.

Здесь мой файл next.config. js file: 

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;
  }

});

1 Ответ

0 голосов
/ 15 января 2020

Вам не нужно 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;
  }
});
...