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 styles do not work.

My code is as follow:

pages/index.js:

import React from 'react'
import "../style.css"

class Index extends React.Component {
    render() {
        return (
            <div className="example">Hello World!</div>
        );
    }
}

export default Index

next.config.js:

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

style.css:

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

package.json:

{
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@zeit/next-css": "^0.1.5",
        "next": "^6.0.0",
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-redux": "^5.0.7",
        "react-scripts": "1.1.4",
        "redux": "^4.0.0",
        "redux-devtools": "^3.4.1"
    },
    "scripts": {
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "dev": "next",
        "build": "next build",
        "start": "next start"
    }
}

Questions:

1. There is an "Uncaught SyntaxError" in Chrome, but it seems to not affect the rendering of the page. But I still wondering the reason and the solution. index.js error in chrome is below img

2. As shown in Chrome, there's no "example" class, which means the style.css file is not loaded. Am I missing anything? no CSS file in chrome

Thanks in advance.

Hi @ArgentBarbie, did you create the _document.js file in the pages directory? Can you paste the code in here too if you have? — mtl
– mtl, Commented May 3, 2018 at 18:19
@mtl Sorry, I didn't create _document.js. Is it necessary? What should be inside the file? — ArgenBarbie
– ArgenBarbie, Commented May 4, 2018 at 0:58
Hi @ArgentBarbie, in the future, try to only ask one question at a time :). If you have two questions, simply ask two separate questions. It makes it easier to answer for two different people who might only have the answers to one of the questions. And it makes the individual questions searchable, helping other people with the same issue. Good luck with Next.js! — mtl
– mtl, Commented May 4, 2018 at 7:17

Sahil Rajput · Accepted Answer · 2021-04-19 18:14:15Z

29

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 as dev dependency:

npm install --save-dev @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 () => <div>Welcome to next.js 7!</div>

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 (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

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.

edited Apr 19, 2021 at 18:14

Sahil Rajput

4146 silver badges19 bronze badges

answered May 4, 2018 at 7:13

mtl

7,5672 gold badges23 silver badges24 bronze badges

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

3 Comments

Pavindu Over a year ago

just importing .css files affect next/router behaviour in dev mode.Some functions like Router.push and replace hangs on and doesn't work properly.

Jonas Over a year ago

Isn't that exactly what he has in his code? I can't find a difference. I followed the same steps but its not working for me

Master117 Over a year ago

@Jonas I agree, thats exactly what he has. I have the same and it's not working either.

Ofir Hadad · Accepted Answer · 2020-06-29 17:28:28Z

13

For anyone who comes here ,the new Next JS supports CSS out of the box. The catch is that for modules (components), they must be named as the component. So, if you have a header inside a components directory, it must be named header.module.css

built-in-css-module-support-for-component-level-styles

edited Jun 29, 2020 at 17:28

Ofir Hadad

1,9003 gold badges28 silver badges47 bronze badges

answered Feb 29, 2020 at 15:48

cross19xx

3,5072 gold badges28 silver badges41 bronze badges

1 Comment

Diego Frehner Over a year ago

For me it works as well, if the css module file name does not match the components name. So i can use the same module in two different components :)

Yilmaz · Accepted Answer · 2021-03-13 02:13:14Z

for next above 9.3, global css is written in "styles/globals.css" and you can import it to _app.js

    import "../styles/globals.css";

Then for each component, you can write its own css and import it into the component. Pay attention to the naming:nameOfFile.module.css

Let's say you have "product.js" component and "product.module.css". you want to load css from "product.css" into "product.js"

import classes from "./product.module.css" // assuming it's in the same directory

you put all class names into product.module.css. Assume you have .main-product in product.module.css. Inside product.js, let's say you have a div to style

<div className={classes.main-product}  > </div>

with the css module feature, you can use the same className in other components and it wont conflict. Because when next.js compiles, it will hash the name of the className, using its module. So hashed values of same classnames from different modules will be same

John Carse · Accepted Answer · 2019-11-05 20:45:02Z

3

Add {name}.css to src/static/styles/.

Then modify the Head in src/pages/_document.js to include the following link:

<Head>
    <link href="/static/styles/{name}.css" rel="stylesheet">
</Head>

answered Nov 5, 2019 at 20:45

John Carse

312 bronze badges

Comments

amin khademian · Accepted Answer · 2018-06-23 11:55:21Z

1

you need create to custom _document.js file.

Custom document when adding css will look like:

import React from "react";

import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {

  render() {
    const { buildManifest } = this.props;
    const { css } = buildManifest;
    return (
      <html lang="fa" dir="rtl">
        <Head>
          {css.map(file => (
            <link rel="stylesheet" href={`/_next/${file}`} key={file} />
          ))}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

answered Jun 23, 2018 at 11:55

amin khademian

2,0601 gold badge10 silver badges17 bronze badges

Comments

Hamed · Accepted Answer · 2019-05-07 07:14:50Z

1

As Zeit said :

Create a /static folder at the same level the /pages folder.
In that folder put your .css files
In your page components import Head and add a to your CSS.

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

And that's it, this way Next.js should render the link tag in the head of the page and the browser will download the CSS and apply it.

Thanks Sergiodxa at Github for this clear solution.

answered May 7, 2019 at 7:14

Hamed

5954 silver badges18 bronze badges

Comments

Mehrdad Masoumi · Accepted Answer · 2019-08-18 09:34:32Z

If you use next.js do this.

create next.config.js in root projects

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

function HACK_removeMinimizeOptionFromCssLoaders(config) {
    console.warn(
        'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
    );
    config.module.rules.forEach(rule => {
        if (Array.isArray(rule.use)) {
            rule.use.forEach(u => {
                if (u.loader === 'css-loader' && u.options) {
                    delete u.options.minimize;
                }
            });
        }
    });
}

module.exports = withCSS({
    webpack(config) {
        HACK_removeMinimizeOptionFromCssLoaders(config);
        return config;
    },
});

Don't forget to restart the server

Partho · Accepted Answer · 2021-08-09 13:53:22Z

1

Global CSS Must Be in Your Custom <App> Why This Error Occurred An attempt to import Global CSS from a file other than pages/_app.js was made.

Global CSS cannot be used in files other than your Custom due to its side-effects and ordering problems.

Possible Ways to Fix It Relocate all Global CSS imports to your pages/_app.js file.

Or, update your component to use local CSS (Component-Level CSS) via CSS Modules. This is the preferred approach.

Example:

// pages/_app.js
import '../styles.css'

export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

answered Aug 9, 2021 at 13:53

Partho

2,7753 gold badges22 silver badges31 bronze badges

Comments

Gucal · Accepted Answer · 2021-06-17 15:01:48Z

0

Set this to false if your app works directly with the web 5 package.

module.exports = {
  // Webpack 5 is enabled by default
  // You can still use webpack 4 while upgrading to the latest version of 
  // Next.js by adding the "webpack5: false" flag
  webpack5: false,
}

You can use webpack 4.

yarn add webpack@webpack-4

answered Jun 17, 2021 at 15:01

Gucal

9411 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

Next.js - import css file does not work

9 Answers 9

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related