Next.js - import css file does not work

Question

I am creating a project with react, redux and next.js, and want to import CSS files in js.

I followed instructions in next.js/#css and next-css, but find out that CSS st

Answer 1

EDIT 2: As of Next.js > 10, you can import a global CSS file into _app.js, and you can use CSS modules in your components. More in the Next.js docs.

---

EDIT: As of Next.js 7, all you have to do to support importing .css files is to register the withCSS plugin in your next.config.js. Start by installing the plugin:

npm install --save @zeit/next-css

Then create the next.config.js file in your project root and add the following to it:

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})

You can test that this is working by creating a simple page and importing some CSS. Start by creating a CSS file:

// ./index.css
div {
    color: tomato;
}

Then create the pages folder with an index.js file. Then you can do stuff like this in your components:

// ./pages/index.js
import "../index.css"
export default () => 
Welcome to next.js 7!

You can also use CSS modules with a few lines of config. For more on this check out the documentation on nextjs.org/docs/#css.

---

Deprecated: Next.js < 7:

You'll also need to create a _document.js file in your pages folder and link to the compiled CSS file. Try it out with the following content:

// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      
        
          
        
        
          

          
        
      
    )
  }
}

The stylesheet is compiled to .next/static/style.css which means that the CSS file is served from /_next/static/style.css, which is the value of the href attribute in the link tag in the code above.

As for the first question, it's probably Chrome not understanding the import syntax. Try to enable the Experimental Web Platform flag in chrome:flags and see if that solves it.