📌  相关文章
📜  Next.js-全球CSS支持

📅  最后修改于: 2020-10-22 06:45:19             🧑  作者: Mango

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

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

让我们更新“ CSS支持”一章中使用的nextjs项目。

首先在根级别创建一个styles目录，并添加文件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;
}

在页面目录中创建_app.js文件

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return 
}

启动Next.js服务器

运行以下命令以启动服务器-。

npm run dev
> nextjs@1.0.0 dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

验证输出

在浏览器中打开localhost：3000，您将看到以下输出。

样式首页

单击“第一篇文章”链接。

样式首页