内置对 CSS 的支持

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;
}

创建一个 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 文件中导入（import）样式表。

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

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

Import styles from node_modules

If you’d like to import CSS files from node_modules, you must do so inside pages/_app.js.

添加组件级 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 的支持具有相同的好处和限制。

自定义 Sass 参数

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

例如，添加 includePaths：

const path = require('path')

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

对 Less 和 Stylus 的支持

如需支持 .less 或 .styl 文件，可以使用如下插件：

• @zeit/next-less
• @zeit/next-stylus

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

Error: Cannot find module 'less'

CSS-in-JS

示例

• Styled JSX
• Styled Components
• Styletron
• Glamor
• Cxs
• Aphrodite
• Fela

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

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

export default HiThere

我们打包了 styled-jsx 以支持范围隔离（isolated scoped）的 CSS。 目的是支持类似于 Web 组件的 “影子（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 文档 以获取更多示例。

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.

相关内容

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