next.js 添加全局内置 css 样式——迹忆客-ag捕鱼王app官网

在 next.js 中，让我们创建将应用于所有页面的全局样式。

在此示例中，我们将创建一个 styles.css，它将用于所有使用 _app.js 组件的组件。

让我们更新 css 支持章节中使用的 nextjs 项目。

首先在根目录创建一个styles目录，并添加一个文件 styles.css，如下

styles.css

html,
body {
   padding: 0;
   margin: 0;
   line-height: 1.6;
   font-size: 18px;
   background-color: lime;
}
* {
   box-sizing: border-box;
}
a {
   color: #0070f3;
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}
img {
   max-width: 100%;
   display: block;
}

在 pages 目录下创建 _app.js 文件

_app.js

import '../styles/styles.css'
export default function app({ component, pageprops }) {
   return 
}

启动 next.js 服务器

运行以下命令启动服务器

$ npm run dev

在浏览器中打开 localhost:3000 ，我们将看到以下输出。