使用 Next.js 添加全局 CSS
2023年03月24日 - 约 354 字

全局 CSS 概述

在 Next.js 中，您可以通过 pages/_app.js 导入全局 CSS ，您不能在其他任何地方导入全局 CSS。

无法在外部导入全局 CSS 的原因是 pages/_app.js 里的全局 CSS 会影响页面上的所有元素。

如果您要从主页导航到该 /posts/first-post 页面，主页的全局样式会在 /posts/first-post 无任何影响。

创建全局 CSS 文件

您可以将全局 CSS 文件放在任何地方并使用任何名称。因此，让我们执行以下操作：

创建一个顶级 styles 目录和一个 global.css 文件。
在 CSS 文件里 styles/global.css 添加下面的内容进去，此代码重置一些样式并更改 a 标签的颜色：

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

引入全局 CSS 文件

最后，将 CSS 文件导入您之前创建的 pages/_app.js 文件中：

import '../styles/global.css';

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

现在，如果您访问 http://localhost:3000/posts/first-post ，您会看到样式已应用。在 _app.js 里导入的任何样式都将全局应用到应用程序的所有页面。

使用 Next.js 添加全局 CSS2023年03月24日 - 约 354 字

全局 CSS 概述

创建全局 CSS 文件

引入全局 CSS 文件

使用 Next.js 添加全局 CSS
2023年03月24日 - 约 354 字