内置 CSS 支持:基本 CSS 示例及使用 Tailwind CSS

2023-10-08 20:38:40

Next.js 允许您从 JavaScript 文件导入 CSS 文件。这是可能的，因为 Next.js 扩展了importJavaScript 之外的概念。餐饮加盟

添加全局样式表

要将样式表添加到您的应用程序，请在 .css 文件中导入 CSS 文件pages/_app.js。

例如，考虑以下名为的样式表styles.css：

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

如果pages/_app.js文件不存在，则创建一个文件。然后，import该styles.css文件。

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

这些样式 ( styles.css) 将应用于应用程序中的所有页面和组件。由于样式表的全局特性，并且为了避免冲突，您只能将它们导入到pages/_app.js.

在开发中，以这种方式表达样式表允许您在编辑样式时热重新加载样式——这意味着您可以保持应用程序状态。

在生产中，所有 CSS 文件将自动连接成一个缩小的.css文件。

导入样式 `node_modules`

从 Next.js 9.5.4 开始，node_modules允许从应用程序的任何位置导入 CSS 文件。

对于全局样式表，例如bootstrap或nprogress，您应该将文件导入pages/_app.js. 例如：

// pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

要导入第三方组件所需的 CSS，您可以在您的组件中执行此操作。例如：

// components/ExampleDialog.js
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

添加组件级 CSS

Next.js 支持使用文件命名约定的CSS 模块[name].module.css。

CSS 模块通过自动创建唯一的类名来局部作用于 CSS。这允许您在不同的文件中使用相同的 CSS 类名而不必担心冲突。

这种行为使 CSS Modules 成为包含组件级 CSS 的理想方式。CSS 模块文件可以导入到应用程序的任何位置。

例如，考虑文件夹Button中的一个可重用组件components/：

首先，components/Button.module.css使用以下内容创建：

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

然后，创建components/Button.js、导入和使用上述 CSS 文件：

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS 模块是一项可选功能，仅对.module.css扩展名为. <link>仍然支持常规样式表和全局 CSS 文件。

在生产中，所有 CSS Module 文件将自动连接成许多缩小和代码拆分的 .css文件。这些.css文件代表您的应用程序中的热执行路径，确保为您的应用程序加载最少的 CSS 以进行绘制。

Sass 支持

Next.js 允许您使用.scss和.sass扩展导入 Sass 。你可以通过 CSS Modules 和.module.scssor.module.sass扩展来使用组件级的 Sass 。

在使用 Next.js 的内置 Sass 支持之前，请务必安装sass：

npm install sass

Sass 支持与上面详述的内置 CSS 支持具有相同的优点和限制。

注意：Sass 支持两种不同的语法，每种都有自己的扩展名。该.scss扩展需要您使用SCSS语法，同时.sass扩展需要您使用缩进语法（“萨斯”）。

如果您不确定选择哪个，请从.scssCSS 超集的扩展开始，并且不需要您学习缩进语法（“Sass”）。

自定义 Sass 选项

如果你想配置 Sass 编译器，你可以使用sassOptionsin 来完成next.config.js。

例如添加includePaths：

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Sass 变量

Next.js 支持从 CSS 模块文件导出的 Sass 变量。

例如，使用导出的primaryColorSass 变量：

/* variables.module.scss */
$primary-color: #64FF00

:export {
  primaryColor: $primary-color
}

// pages/_app.js
import variables from '../styles/variables.module.scss'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}

CSS-in-JS

例子

可以使用任何现有的 CSS-in-JS 解决方案。最简单的一种是内联样式：

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}

export default HiThere

我们捆绑了styled-jsx以提供对隔离作用域 CSS 的支持。目的是支持类似于 Web Components 的“shadow CSS”，不幸的是，它不支持服务器渲染并且只支持 JS。

有关其他流行的 CSS-in-JS 解决方案（如样式化组件），请参阅上述示例。

使用的组件styled-jsx如下所示：

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

有关更多示例，请参阅styled-jsx 文档。

常问问题

它在禁用 JavaScript 的情况下工作吗？

是的，如果您禁用 JavaScript，CSS 仍将在生产版本 ( next start) 中加载。餐饮加盟

码农公寓