我有一个使用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无法正常工作。
答案 0 :(得分:0)
尝试下面的代码进入您的 next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({cssModules: true})