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

IT技术 javascript reactjs next.js
2021-04-29 14:50:22

我正在创建一个带有 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

下一个.config.js：

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

样式.css：

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

包.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中显示没有“example”类，表示没有加载style.css文件。我错过了什么吗？chrome 中没有 CSS 文件

提前致谢。

4个回答

编辑 2：从 Next.js > 10 开始，您可以将全局 CSS 文件导入到 中_app.js，并且可以在组件中使用 CSS module。Next.js 文档中的更多内容。

编辑：从 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;
}

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

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

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

弃用：Next.js < 7：

您还需要_document.js在pages文件夹中创建一个文件并链接到已编译的 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，这是上面代码中标记中href属性的值link。

至于第一个问题，可能是 Chrome 不理解导入语法。尝试启用“实验性 Web 平台”标志chrome:flags，看看是否能解决问题。

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

内置 css-module-support-for-component-level-styles

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

然后修改Headinsrc/pages/_document.js以包含以下内容link：

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

正如Zeit所说：

  1. 在 /pages 文件夹的同一级别创建一个 /static 文件夹。
  2. 在该文件夹中放置您的 .css 文件
  3. 在您的页面组件中导入 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 提供了这个清晰的解决方案。

其它你可能感兴趣的问题
上一篇在模型上绘制文本 下一篇移动 X 时 CoreXY Carriage 在 Y 上移动