I have a nextJS app using express as custom server. I want to use next-css to include css files for styling. How do i setup this configuration?
Have created a next.config.js file containing:
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()
My server.js files is based on the example given here: https://github.com/zeit/next.js/blob/master/examples/custom-server-express/server.js
In package.json i'm including following:
"@zeit/next-css": "^1.0.1",
"next": "latest",
"react": "16.4.2",
"react-dom": "16.4.2",
"webpack": "^4.22.0"
In the file i'm importing the .css file using import './timeline.css'
The css file contains:
.example {
font-size: 50px;
}
The error displayed in the terminal is:
> 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',
....
To me it looks like the next.config.js is not loaded correctly. I'm in doubt on if i need to pass the configuration as an object to const app = next({ dev })
or the next.config.js is loaded but the next-css is not working.
Try below code into your next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({cssModules: true})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.