Реагируйте с NextJS и Next-CSS: вам может понадобиться соответствующий загрузчик для обработки этого типа файлов - PullRequest
Новая
       6

Реагируйте с NextJS и Next-CSS: вам может понадобиться соответствующий загрузчик для обработки этого типа файлов

0 голосов
/ 27 сентября 2018

Для создания React-App я использую NextJS.Чтобы использовать css-файл, я использую next-css plugin, чтобы сделать это.Но когда я создаю свое приложение, я получаю следующую ошибку: 

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

Мой next.config.js файл, выглядит так: 

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  cssModules: false,
})

Я импортирую и использую .css-файлв моих компонентах следующим образом: 

import '../style.css'
export default () => <div className="example">Hello World!</div>

Мой css-файл выглядит так: 

.example {
  color: red;
 }

Где моя проблема?Кто-нибудь может мне помочь исправить это?

Ответы [ 3 ]

0 голосов
/ 28 сентября 2018

Я решил проблему.В моем next.config.js я использую несколько плагинов.Моя ошибка заключалась в том, что я написал несколько module.exports заявлений.В моем случае решение выглядит так: 

//next.config.js
const withImages = require('next-images');
const withCSS = require('@zeit/next-css');

module.exports = withImages(withCSS());
0 голосов
/ 20 марта 2019

Попробуйте это в вашем next.config.js: 

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

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

Теперь вы сможете импортировать таблицы стилей из узловых модулей следующим образом: 

import 'bootstrap-css-only/css/bootstrap.min.css';

Примечание: Использование Next v 8 +

Справочная информация: Я потратил несколько часов, пытаясь просто импортировать CSS, установленный как node_module, и различные решения в большинстве случаев являются обходными обходными путями., но, как показано выше, есть простое решение.Он был предоставлен одним из членов основной команды: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

0 голосов
/ 27 сентября 2018

Я не уверен, какая у вас проблема, но я просто следовал примеру docs :

1 Установлен next-css npm install --save @zeit/next-css

2 Создан next.config.js

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

3 Создан style.css файл в корневой папке 

.example {
  font-size: 50px;
  background-color: red;
}

4 Создан тестовый сайт со стилями 

import '../style.css';

export default () => <div className="example">Hello World!</div>;

и результат показывает this

У меня есть следующие зависимости 

"@zeit/next-css": "^1.0.1",
"next": "^7.0.0",
"react": "^16.5.2",
"react-dom": "^16.5.2"

Надеюсь, это вам немного поможет!

...