如何在NextJS 13应用程序的头中添加CSS链接标签

qyuhtwio  于 2023-05-28  发布在  其他
关注(0)|答案(3)|浏览(136)

我想在我的Next 13应用程序中链接到一个普通的CSS文件,但将其添加到Head组件中没有任何作用。我还尝试在应用程序和页面中创建一个custom _document,但也没有任何效果。在Next 13中推荐的方法是什么?谢谢!

mxg2im7a

mxg2im7a1#

请参阅以下文档,了解如何导入全局样式表-https://nextjs.org/docs/app/building-your-application/styling/css-modules#external-stylesheets
styles文件夹导入全局样式表:

import "@/styles/global-stylesheet.css"

从npm包导入全局样式表:

import "bootstrap/dist/css/bootstrap.css"

注意:外部样式表必须直接从npm包中导入,或者下载并与代码库共置。不能使用<link rel="stylesheet" />

wwtsj6pe

wwtsj6pe2#

首先,你可以这样做:
1.创建扩展名为Head.module.css的头部组件样式表。
1.然后使用components文件夹中的import styles from "./Head.module.css将其导入Head.js组件。
1.确保这两个文件都在components文件夹中。
仅此而已
你也可以参考这个CSS模块文档
我希望这对你有帮助!

92dk7w1h

92dk7w1h3#

如果整个应用程序都有global.css,则可以在RootLayout中导入它

import "./global.css";

如果要为每个页面导入本地范围的css,例如home页面,请创建page.module.css
然后导入

import styles from "./page.module.css";
export default async function Home() {}

相关问题