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

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!

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

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());