Next.js - import css file does not work

问题

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.

回答1:

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 () => <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.

回答2:

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

回答3:

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.

回答4:

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

回答5:

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>

来源：https://stackoverflow.com/questions/50149729/next-js-import-css-file-does-not-work

标签

javascript

reactjs

next.js