如何在 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