Question

我在 Next js 中创建了项目。我有组件。但我想在组件中使用 <link rel="stylesheet" href="app.css" /> 添加 CSS 文件。

我写了这段代码，但找不到页面。我该如何解决这个问题？

我的代码

const Header = () => {
    return (
      <Fragment>
        <Head>
          <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
          <meta charset="UTF-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
          />
          <title>Site | Title</title>
          <link href="/statics/app.css" rel="stylesheet" />
        </Head>
      </Fragment>
    );
}

谢谢你最好的问候。

Answer 1

Next.js 是一个 React 框架，所以就像使用 React 一样。如果您使用外部 css 文件，只需在文件顶部导入它。然后，如果你在 app.css 中有类 Foo 例如。

.Foo {
    color: blue;
}

import '/statics/app.css';

const Header = () => {
    return (
      <Fragment>
        <Head>
          <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
          <meta charset="UTF-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
          />
          <title>Site | Title</title>
        </Head>
       <>
         <p className="Foo">Bar</p>
       </>
      </Fragment>
    );
}

如果您想像整个应用的主题一样全局定义样式，请在您的 pages/_app.js 文件中执行此操作。资源：https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

如何在Next js的组件中添加css文件

1 个答案: