Next.js - 导入 css 文件不起作用答案

【问题标题】：Next.js - import css file does not workNext.js - 导入 css 文件不起作用
【发布时间】：2018-10-13 10:53:46
【问题描述】：

我正在用react、redux和next.js创建一个项目，想在js中导入CSS文件。

我按照next.js/#css 和next-css 中的说明进行操作，但发现 CSS 样式不起作用。

我的代码如下：

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

下一个.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"
    }
}

问题：

1. Chrome 中存在“Uncaught SyntaxError”，但似乎不影响页面的渲染。但我仍然想知道原因和解决方案。 chrome中的index.js错误低于img

2. 如 Chrome 中所示，没有“示例”类，这意味着 style.css 文件没有加载。我错过了什么吗？ chrome 中没有 CSS 文件

提前致谢。

【问题讨论】：

嗨@ArgentBarbie，您是否在pages 目录中创建了_document.js 文件？如果有的话，你能把代码也贴在这里吗？
@mtl 抱歉，我没有创建 _document.js。有必要吗？文件里面应该有什么？
嗨@ArgentBarbie，以后尽量一次只问一个问题:)。如果您有两个问题，只需问两个单独的问题。对于可能只对其中一个问题有答案的两个不同的人，它可以更容易地回答。它使个人问题可搜索，帮助其他人解决同样的问题。祝 Next.js 好运！

标签： javascript reactjs next.js

【解决方案1】：

编辑 2：从 Next.js > 10 开始，您可以将全局 CSS 文件导入 _app.js，并且可以在组件中使用 CSS 模块。更多内容请关注Next.js docs。

编辑：从 Next.js 7 开始，支持导入 .css 文件所需要做的就是在 next.config.js 中注册 withCSS 插件。首先将插件安装为开发依赖项：

npm install --save-dev @zeit/next-css

然后在您的项目根目录中创建next.config.js 文件，并在其中添加以下内容：

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

您可以通过创建一个简单的页面并导入一些 CSS 来测试它是否有效。首先创建一个 CSS 文件：

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

然后使用index.js 文件创建pages 文件夹。然后你可以在你的组件中做这样的事情：

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

您还可以使用带有几行配置的 CSS 模块。有关这方面的更多信息，请查看nextjs.org/docs/#css 上的文档。

已弃用：Next.js

您还需要在pages 文件夹中创建一个_document.js 文件并链接到已编译的CSS 文件。试试下面的内容：

// ./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>
    )
  }
}

样式表被编译为.next/static/style.css，这意味着CSS文件是从/_next/static/style.css提供的，这是上面代码中link标签中href属性的值。

至于第一个问题，可能是 Chrome 不理解导入语法。尝试在chrome:flags 中启用 Experimental Web Platform 标志，看看是否可以解决问题。

【讨论】：

仅导入 .css 文件会影响开发模式下的 next/router 行为。Router.push 和 replace 等某些功能会挂起，无法正常工作。
这不正是他的代码中的内容吗？我找不到区别。我遵循了相同的步骤，但它不适合我
@Jonas 我同意，这正是他所拥有的。我有同样的，它也不工作。

【解决方案2】：

对于来到这里的任何人，新的 Next JS 都支持开箱即用的 CSS。问题是对于模块（组件），它们必须被命名为组件。因此，如果您在 components 目录中有标题，则必须将其命名为 header.module.css

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

【讨论】：

谢谢伙计！正是我需要的。

【解决方案3】：

将{name}.css 添加到src/static/styles/。

然后修改src/pages/_document.js中的Head，使其包含以下link：

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

【讨论】：

【解决方案4】：

正如Zeit 所说：

在 /pages 文件夹的同一级别创建一个 /static 文件夹。
在该文件夹中放置您的 .css 文件
在您的页面组件中导入 Head 并将 a 添加到您的 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

就是这样，这样 Next.js 应该在页面头部呈现链接标签，浏览器将下载 CSS 并应用它。

感谢Github 的 Sergiodxa 提供这个清晰的解决方案。

【讨论】：

【解决方案5】：

您需要创建自定义 _document.js 文件。

添加 css 时的自定义文档如下所示：

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

【讨论】：

【解决方案6】：

如果您使用 next.js，请执行此操作。

在根项目中创建 next.config.js

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

别忘了重启服务器

【讨论】：

【解决方案7】：

9.3以上的next，全局css写在“styles/globals.css”中，你可以导入到_app.js中

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

然后对于每个组件，你可以编写自己的 css 并将其导入到组件中。注意命名：nameOfFile.module.css

假设您有“product.js”组件和“product.module.css”。您想将 css 从“product.css”加载到“product.js”

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

您将所有类名放入product.module.css。假设您在product.module.css 中有.main-product。在product.js 内部，假设您有一个div 来设置样式

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

借助 css 模块功能，您可以在其他组件中使用相同的 className 并且不会冲突。因为当 next.js 编译时，它会使用其模块对 className 的名称进行哈希处理。所以来自不同模块的相同类名的哈希值将是相同的

【讨论】：

【解决方案8】：

如果您的应用直接使用 web 5 包，请将此设置为 false。

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,
}

你可以使用 webpack 4。

yarn add webpack@webpack-4

【讨论】：

【解决方案9】：

全局 CSS 必须在您的自定义中为什么会发生此错误尝试从 pages/_app.js 以外的文件导入全局 CSS。

由于其副作用和排序问题，全局 CSS 不能在您的自定义以外的文件中使用。

修复它的可能方法将所有全局 CSS 导入重新定位到您的 pages/_app.js 文件。

或者，通过 CSS 模块更新您的组件以使用本地 CSS（组件级 CSS）。这是首选方法。

例子：

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

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

【讨论】：