Question

我正在构建 Next.js 应用程序并从 HTML 模板开始。我已将资产包含在我的 Head 和 _document.js 文件中，如下所示：

<Head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content={keywords} />
    <meta name="description" content={description} />
    <meta charSet="utf-8" />
    <link rel="icon" href="./favicon.ico" />
    <title>{title}</title>
    <link type="text/css" rel="stylesheet" href="css/reset.css" />
    <link type="text/css" rel="stylesheet" href="css/plugins.css" />
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <link type="text/css" rel="stylesheet" href="css/yourstyle.css" />
</Head>

_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
          <script type="text/javascript" src="js/jquery.min.js"></script>
          <script type="text/javascript" src="js/plugins.js"></script>
          <script type="text/javascript" src="js/scripts.js"></script>
        </body>
      </Html>
    )
  }
}

这些文件在我所有的顶级页面上都正确加载，但对于我动态生成的帖子，文件没有加载：

<块引用>

'加载资源失败'。

Answer 1

目前，您只能在所有页面之间共享的 _app.js 中导入全局 CSS，或者在您的组件中使用 CSS 模块（以及 javascript 文件中的 CSS）。但是您不能导入特定于页面的 CSS。

您可以在 the documentation about CSS in Next.js 中找到示例。要在您的 _app.js 中导入全局 CSS 文件，就像在响应中一样，位于该文件的顶部：

import "../styles/main.css";

对于 CSS 模块，它是相同的，但在您的组件中，它仅影响该组件：

import styles from "../styles/Home.module.css";

要了解更多详细信息，您可以阅读the RFC that implemented the current way CSS is supported in Next.js。

这是其中的一部分：

<块引用>

Next.js 将只允许您在自定义页面/_app.js 中导入全局 CSS。这是一个非常重要的区别（也是其他框架中的一个设计缺陷），因为允许在应用程序中的任何位置导入全局 CSS 意味着由于 CSS 的级联性质，没有任何代码可以拆分。这是一种有意的约束。因为例如在一个组件中导入全局 CSS 时，从一个页面移动到另一个页面时它的行为会有所不同。

<块引用>

Next.js 将允许在您的应用程序中的任何地方使用纯 CSS 模块。组件级 CSS 必须遵循命名 CSS 文件 .module.css 的约定，以表明其与 CSS Modules specification 一起使用的意图。

这只是当前的行为，开发正在进行中。有an open ticket to implement global CSS per page。你可以去那里投票。

Answer 2

我不确定为什么会这样，但是将所有 css 和 js 文件的路径从 css/style.css 更改为 ../css/style.css 都有效。我的脚本和样式现在都加载到我的顶级页面和我动态生成的帖子页面上。

Next js public/assets/css 不会在动态生成的页面上加载

2 个答案: