Question

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

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

我的代码如下：

页/ 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"
    }
}

问题：

1。有一个＆＃34; Uncaught SyntaxError＆＃34;在Chrome中，但它似乎不会影响页面的呈现。但我仍然想知道原因和解决方案。 chrome中的index.js错误低于img

2。如Chrome所示，没有＆＃34;示例＆＃34; class，表示未加载style.css文件。我错过了什么吗？ chrome中没有CSS文件

提前致谢。

Answer 1

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

Private Sub Toggle10_Click()
    Call Shell("python.exe D:\project\nc\test.py ", 1)
End Sub

然后在项目根目录中创建npm install --save @zeit/next-css文件，并将以下内容添加到其中：

next.config.js

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

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

然后使用// ./index.css div { color: tomato; }文件创建pages文件夹。然后你可以在你的组件中做这样的事情：

index.js

你也可以使用带有几行配置的CSS模块。有关详细信息，请查看nextjs.org/docs/#css上的文档。

不推荐使用：Next.js＆lt; 7：

您还需要在// ./pages/index.js import "../index.css" export default () => <div>Welcome to next.js 7!</div>文件夹中创建一个_document.js文件，并链接到已编译的CSS文件。尝试使用以下内容：

pages

样式表编译为// ./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> ) } }，这意味着CSS文件是从.next/static/style.css提供的，这是/_next/static/style.css标记中href属性的值。上面的代码。

至于第一个问题，Chrome可能不了解导入语法。尝试在link中启用实验性Web平台标记，看看是否能解决此问题。

Answer 2

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

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

Answer 3

您需要创建自定义 _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>
    );
  }
}

Answer 4

正如Zeit所说：

在与/ pages文件夹相同级别上创建/ static文件夹。
在该文件夹中放入您的.css文件
在页面组件中导入Head并将其添加到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提供了明确的解决方案。

Answer 5

如果您使用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;
    },
});

别忘了重启服务器

Answer 6

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

然后修改Head中的src/pages/_document.js以包括以下link：

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

Answer 7

next 9.3以上，全局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。假设您在 .main-product 中有 product.module.css。在 product.js 中，假设您有一个 div 样式

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

通过css模块特性，你可以在其他组件中使用相同的className，不会冲突。因为当 next.js 编译时，它将使用其模块散列 className 的名称。所以来自不同模块的相同类名的哈希值将相同

Answer 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

Answer 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} />
}

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

9 个答案: