内置对 CSS 的支持

Examples

Next.js 允许你在 JavaScript 文件中导入(import) CSS 文件。 因为 Next.js 扩展了 JavaScript 中的 import 的概念,才能让这一功能成为可能。

添加全局样式表

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

例如,假设有以下样式表 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;
}

<<<<<<< HEAD 创建一个 pages/_app.js 文件 (如果不存在的话)。

然后 importstyles.css 文件。

Create a pages/_app.js file if not already present. Then, import the styles.css file.

e334c4ece8c97ea14fcd974b4510e580a11bcf84

import '../styles.css'

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

<<<<<<< HEAD 这些样式 (styles.css) 将应用于你的应用程序中的所有页面和组件。

由于样式表的全局特性,并且为了避免冲突,你应该 只在 pages/_app.js 文件中导入(import)样式表

These styles (styles.css) will apply to all pages and components in your application. Due to the global nature of stylesheets, and to avoid conflicts, you may only import them inside pages/_app.js.

e334c4ece8c97ea14fcd974b4510e580a11bcf84

在开发中,以这种方式表示样式可让你在编辑样式时对其进行热重载,这意味着你可以保持应用程序的状态。

在生产环境中,所有 CSS 文件将自动合并为一个经过精简的 .css 文件。

Import styles from node_modules

Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.

For global stylesheets, like bootstrap or nprogress, you should import the file inside pages/_app.js. For example:

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

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

For importing CSS required by a third party component, you can do so in your component. For example:

// components/ExampleDialog.js
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
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 通过 [name].module.css 文件命名约定来支持 CSS 模块

CSS 模块通过自动创建唯一的类名从而将 CSS 限定在局部范围内。 这使您可以在不同文件中使用相同的 CSS 类名,而不必担心冲突。

此行为使 CSS 模块成为包含组件级 CSS 的理想方法。 CSS 模块文件 可以导入(import)到应用程序中的任何位置

例如,假设 components/ 目录下有一个可重用 Button 组件:

首先,创建 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 文件,导入(import)并使用上述 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 模块文件将被自动合并为 多个经过精简和代码分割的 .css 文件。 这些 .css 文件代表应用程序中的热执行路径(hot execution paths),从而确保为应用程序绘制页面加载所需的最少的 CSS。

对 Sass 的支持

Next.js 允许你导入(import)具有 .scss.sass 扩展名的 Sass 文件。 你可以通过 CSS 模块以及 .module.scss.module.sass 扩展名来使用组件及的 Sass。

在使用 Next.js 的内置 Sass 支持前,请确保安装了 sass

npm install sass

对 Sass 的支持与上述内置 CSS 的支持具有相同的好处和限制。

<<<<<<< HEAD

自定义 Sass 参数

=======

Note: Sass supports two different syntaxes, each with their own extension. The .scss extension requires you use the SCSS syntax, while the .sass extension requires you use the Indented Syntax ("Sass").

If you're not sure which to choose, start with the .scss extension which is a superset of CSS, and doesn't require you learn the Indented Syntax ("Sass").

Customizing Sass Options

e334c4ece8c97ea14fcd974b4510e580a11bcf84

如果要配置 Sass 编译器,可以使用 next.config.js 文件中的 sassOptions 参数进行配置。

例如,添加 includePaths

const path = require('path')

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

对 Less 和 Stylus 的支持

如需支持 .less.styl 文件,可以使用如下插件:

如果使用 less 插件,请不要忘记添加 less 依赖,否则将看到类似以下的错误:

Error: Cannot find module 'less'

CSS-in-JS

示例

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

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

export default HiThere

<<<<<<< HEAD 我们打包了 styled-jsx 以支持范围隔离(isolated scoped)的 CSS。

目的是支持类似于 Web 组件的 “影子(shadow)CSS”,但不幸的是 不支持服务器端渲染且仅支持 JS

We bundle styled-jsx to provide support for isolated scoped CSS. The aim is to support "shadow CSS" similar to Web Components, which unfortunately do not support server-rendering and are JS-only.

e334c4ece8c97ea14fcd974b4510e580a11bcf84

有关其他流行的 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

<<<<<<< HEAD

请参阅 styled-jsx 文档 以获取更多示例。

Please see the styled-jsx documentation for more examples.

e334c4ece8c97ea14fcd974b4510e580a11bcf84

FAQ

Does it work with JavaScript disabled?

Yes, if you disable JavaScript the CSS will still be loaded in the production build (next start). During development, we require JavaScript to be enabled to provide the best developer experience with Fast Refresh.

相关内容

以下是我们建议接下来需要学习的内容: