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

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 中有 class 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>
    );
}

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

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

问题描述

1 个解决方案

解决方案1
0 2021-02-10 12:49:33

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

问题描述

1 个解决方案

解决方案1 0 2021-02-10 12:49:33

解决方案1
0 2021-02-10 12:49:33