我想在我的Next 13应用程序中链接到一个普通的CSS文件,但将其添加到Head组件中没有任何作用。我还尝试在应用程序和页面中创建一个custom _document,但也没有任何效果。在Next 13中推荐的方法是什么?谢谢!
mxg2im7a1#
请参阅以下文档,了解如何导入全局样式表-https://nextjs.org/docs/app/building-your-application/styling/css-modules#external-stylesheets从styles文件夹导入全局样式表:
styles
import "@/styles/global-stylesheet.css"
从npm包导入全局样式表:
import "bootstrap/dist/css/bootstrap.css"
注意:外部样式表必须直接从npm包中导入,或者下载并与代码库共置。不能使用<link rel="stylesheet" />。
<link rel="stylesheet" />
wwtsj6pe2#
首先,你可以这样做:1.创建扩展名为Head.module.css的头部组件样式表。1.然后使用components文件夹中的import styles from "./Head.module.css将其导入Head.js组件。1.确保这两个文件都在components文件夹中。仅此而已你也可以参考这个CSS模块文档我希望这对你有帮助!
Head.module.css
components
import styles from "./Head.module.css
Head.js
92dk7w1h3#
如果整个应用程序都有global.css,则可以在RootLayout中导入它
global.css
RootLayout
import "./global.css";
如果要为每个页面导入本地范围的css,例如home页面,请创建page.module.css然后导入
home
page.module.css
import styles from "./page.module.css"; export default async function Home() {}
3条答案
按热度按时间mxg2im7a1#
请参阅以下文档,了解如何导入全局样式表-https://nextjs.org/docs/app/building-your-application/styling/css-modules#external-stylesheets
从
styles
文件夹导入全局样式表:从npm包导入全局样式表:
注意:外部样式表必须直接从npm包中导入,或者下载并与代码库共置。不能使用
<link rel="stylesheet" />
。wwtsj6pe2#
首先,你可以这样做:
1.创建扩展名为
Head.module.css
的头部组件样式表。1.然后使用
components
文件夹中的import styles from "./Head.module.css
将其导入Head.js
组件。1.确保这两个文件都在
components
文件夹中。仅此而已
你也可以参考这个CSS模块文档
我希望这对你有帮助!
92dk7w1h3#
如果整个应用程序都有
global.css
,则可以在RootLayout
中导入它如果要为每个页面导入本地范围的css,例如
home
页面,请创建page.module.css
然后导入