如何在 Next.js 中添加样式表？

NextJs 是一个基于 React 的框架，它为开发人员提供了生产所需的所有工具。 Next.js 是一个基于反应的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。

在这篇文章中，我们将学习如何在 NextJs 中添加样式表。样式表用于设计网页以使其具有吸引力，并且是简化使网页可呈现的过程的原因。

创建 NextJs 应用程序：

第 1 步：要创建一个新的 NextJs 应用程序，请在终端中运行以下命令：

npx create-next-app my-next-app

第 2 步：创建项目文件夹（即 my-next-app ）后，使用以下命令移动到该文件夹：

cd my-next-app

项目结构：它看起来像这样。

我们下一个应用程序的目录结构

在这篇文章中，我们使用了样式文件夹components/Navbar.js 、 pages/_app.js和pages/index.js 中的所有 CSS 文件。

句法：

要导入全局 CSS 文件，请使用以下语法：

import "filepath";

要导入 CSS 模块，请使用以下语法：

import custom_var_name from "filepath";

现在要使用 CSS 模块中文件路径中应用的样式，您可以通过以下方式引用它：

custom_var_name.className 

添加样式表：我们的应用程序的初始外观如下所示：

Next Js 应用的初步外观

添加全局样式表：要在 Next Js 应用程序中添加全局样式表，基本上，将应用于整个应用程序的 CSS 规则，只需将 CSS 文件导入pages/_app.js 。

例如，我们的“styles”文件夹中有一个名为“style.css”的 CSS 文件。 CSS 文件如下所示：

style.css

/* Inside "styles/style.css" */
body {
    background-color: rgb(26, 25, 25);
    color: rgb(223, 213, 213);
    font-family: sans-serif;
}

现在让我们通过以下命令将其导入“ pages/_app.js ”文件中：

import '../styles/style.css' 

目前，我们的“ pages/_app.js ”如下所示：

_app.js

import '../styles/style.css'
  
function MyApp({ Component, pageProps }) {
     return 
}
  
export default MyApp

通过添加样式表，我们的应用程序应用了 css 规则，如下所示：

将样式表添加到我们的应用程序的输出

注意：如果您还没有“ pages/_app.js ”文件，请创建一个并添加以下代码：

_app.js

// import '../styles/style.css'
// your other stylesheets as per your wish
  
function MyApp({ Component, pageProps }) {
  return 
}
  
export default MyApp

添加组件级 CSS： Next Js 还支持在您的应用中添加组件级 CSS。它支持使用“ [file].module.css ”命名约定的 CSS 模块。这种使用 CSS 模块的方法允许通过自动创建唯一的类名以及使用具有相同类名的多个样式来将样式本地限定为组件。

CSS 模块可以在应用程序的任何地方导入。

示例：让我们在“ styles ”文件夹中有一个名为“ navbar.module.css ”的文件。

我们的CSS文件的代码如下：

导航栏.module.css

/* Inside "styles/navbar.module.css" */
.current {
    color: indianred;
    text-decoration: none;
}

现在让我们通过导入然后添加该类将这个“当前”类添加到我们的“ components/Navbar.js ”文件中。

导航栏.js

// Inside "components/Navbar.js"
import styles from "../styles/navbar.module.css"; // importing the css file
import Link from "next/link";
  
export default function Navbar({ current }) {
    return (
        

            

                Home page{" "}
                {current === "home" ? (
                    current page
                ) : (
                    ""
                )}{" "}
            
            

                Products page{" "}
                {current === "user" ? (
                    current page
                ) : (
                    ""
                )}{" "}
            
        
    );
}

输出：将组件添加到索引页面后，输出为：

上述代码的输出

从 node_modules 导入样式：要按照引导程序中的假设导入全局样式表，您只需将导入语句添加到“ pages/_app.js ”文件中，如上所示。您还可以通过在您的组件中添加以下 import 语句来在您的组件中导入第三方组件所需的 CSS：

// Inside "component/YourComponent.js"
import "filepath"

// Example
import '@reach/dialog/styles.css'

参考： https://nextjs.org/docs/basic-features/built-in-css-support