Next.js - import css file does not work

后端未结

关注

 6  732

北荒

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

相关标签:

6条回答

臣服心动

2021-02-18 23:02
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 () => <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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

清酒与你

2021-02-18 23:03

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

0 讨论(0)

感动是毒

2021-02-18 23:07

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

0 讨论(0)

离开以前

2021-02-18 23:10

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
情话喂你

2021-02-18 23:10
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2021-02-18 23:13
As Zeit said :
1. Create a /static folder at the same level the /pages folder.
2. In that folder put your .css files
3. 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.
0 讨论(0)
发布评论:

提交评论
- 加载中...