Next.js 全球 CSS 支持
在 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;
}
在 pages 目录下创建 _app.js 文件
import '../styles/styles.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
启动 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，您将看到以下输出。
点击第一篇文章链接。
