React with NextJS and Next-CSS: You may need an appropriate loader to handle this file type

Question

To building a React-App i using NextJS. To use a css-file, i use the next-css plugin to do that. But when i build my App, i get the following error:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

My next.config.js file, looks like this:

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

I importe and use a .css-file in my components as follows:

import '../style.css'
export default () => <div className="example">Hello World!</div>

My css-file Looks like this:

.example {
  color: red;
 }

Where is my issue? Can anyone help me to fix that?

Solution 1

I solved the problem. In my next.config.js i use multiple plugins. My mistake was that I had written several module.exports statements. In my case, the solution looks like this:

//next.config.js
const withImages = require('next-images');
const withCSS = require('@zeit/next-css');

module.exports = withImages(withCSS());

Solution 2

Try this in your next.config.js:

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

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

Now you should be able to import styleshets from node_modules like this:

import 'bootstrap-css-only/css/bootstrap.min.css';

Note: Using Next v 8+

Background: I spent a few hours trying to simply import a CSS installed as a node_module and the various solutions are mostly hacky workarounds, but as shown above, there is a simple solution. It was provided by one of the core team members: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Solution 3

I'm not sure what problem you have but I just followed the docs example:

1 Installed next-css npm install --save @zeit/next-css

2 Created next.config.js

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

3 Created style.css file in the root folder

.example {
  font-size: 50px;
  background-color: red;
}

4 Created a test page that includes styles

import '../style.css';

export default () => <div className="example">Hello World!</div>;

and the result shows this

I have the following dependencies

"@zeit/next-css": "^1.0.1",
"next": "^7.0.0",
"react": "^16.5.2",
"react-dom": "^16.5.2"

Hope this helps you a bit!

Comments

[Niklas]

Thank you for your reply. Could you show me your structure for this app once? Maybe it's my fault.

[iurii]

sure, here it is github.com/yuyokk/nextjs-css-basic-usage-example

[Amy Pellegrini]

Any ideas on how to use this including also additional Next configs?

[iurii]

@AmyPellegrini what configs you mean? Can you give an example?

[Amy Pellegrini]

I've noticed there are many plugins to extend the config using currying patterns, but sometimes the syntax or pattern to follow is not straight forward usable, for example, I'm working on a project where we use withCSS, withPlugins, withConfig functions (imported from @zeit/next-css and similar plugins), but I had to spend some time to make them work in combination. Anyway, it's sorted out now! But thanks anyway.

[Lauris Kuznecovs]

I can confirm, that this works with version 9 of next.js

[Michael Harley]

Adding this one plugin does work. Confirmed. Next 9.1.1

[milkersarac]

This worked for me for adding CSS and SASS together like; withCSS(withSass())