如何结合自定义服务器 Express 使用 next.config.js 中的 next-css

Question

我有一个使用 express 作为自定义服务器的 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

在 package.json 我包括以下内容：

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

在文件中，我使用import './timeline.css' 导入 .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 不起作用。

Answer 1

在您的 next.config.js

中尝试以下代码

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