How to use next-css in next.config.js in combination with custom server Express

Question

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.

I'm not using cssnext but @zeit/next-css github.com/zeit/next-plugins/tree/master/packages/next-css — Peter Savnik
– Peter Savnik, Commented Oct 21, 2018 at 11:57
Have you solved the issue in the end ? I am facing the same problem just now. — ajobi
– ajobi, Commented Dec 2, 2019 at 14:25
Not really ended up going with a different solution using material-ui and just used their examples to handle custom css. — Peter Savnik
– Peter Savnik, Commented Dec 10, 2019 at 8:32

Kartik Bhalala · Accepted Answer · 2018-10-22 12:26:10Z

0

Try below code into your next.config.js

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

answered Oct 22, 2018 at 12:26

Kartik Bhalala

3921 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Peter Savnik Over a year ago

I did try that with same result. According to documentation this should not be necessary for the simple example. github.com/zeit/next-plugins/tree/master/packages/next-css

Kartik Bhalala Over a year ago

try this example : https://github.com/zeit/next.js/tree/master/examples/with-next-css

Peter Savnik Over a year ago

The example is working. But i can not get it working in combination with next custom server.

Kartik Bhalala Over a year ago

try below code in next.config.js

const withCSS = require('@zeit/next-css')      module.exports = withCSS({           cssModules: true,           cssLoaderOptions: {           importLoaders: 1,           localIdentName: "[local]___[hash:base64:5]",        }      })

Peter Savnik Over a year ago

can you ellaborate on what localIdentName: "[local]___[hash:base64:5]", will do?

Collectives™ on Stack Overflow

How to use next-css in next.config.js in combination with custom server Express

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related