Как использовать next-css в next.config.js в сочетании с пользовательским сервером Express - PullRequest
Новая
       7

Как использовать next-css в next.config.js в сочетании с пользовательским сервером Express

0 голосов
/ 21 октября 2018

У меня есть приложение nextJS, использующее экспресс в качестве пользовательского сервера.Я хочу использовать next-css для включения CSS-файлов для стилизации.Как мне настроить эту конфигурацию?

Создан файл next.config.js, содержащий: 

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

Мои файлы server.js основаны на приведенном здесь примере: https://github.com/zeit/next.js/blob/master/examples/custom-server-express/server.js

В пакете.json Я включаю следующее: 

"@zeit/next-css": "^1.0.1",
"next": "latest",
"react": "16.4.2",
"react-dom": "16.4.2",
"webpack": "^4.22.0"

В файл, который я импортирую .css-файл, используя import './timeline.css' Файл CSS содержит: 

.example {
    font-size: 50px;
  }

Ошибка, отображаемая втерминал: 

> Failed to build
{ Error: (client) ./components/timeline/timeline.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .example {
|     font-size: 50px;
|   }
 @ ./components/timeline/timeline.js 23:0-25
.....
errors: 
   [ '(client) ./components/timeline/timeline.css 1:0\nModule parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type.\n> .example {\n|     font-size: 50px;\n|   }\n @ ./components/timeline/timeline.js 23:0-25\n @ ./pages/calender.js\n @ multi ./pages/calender.js',
....

Мне кажется, что next.config.js загружен неправильно.Я сомневаюсь, нужно ли передавать конфигурацию как объект в const app = next({ dev }) или загружается next.config.js, но next-css не работает.

1 Ответ

0 голосов
/ 22 октября 2018

Попробуйте приведенный ниже код в next.config.js 

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