内置 CSS 支持

示例

Next.js 允许你在 JavaScript 文件中导入 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 file 文件,如果它不存在的话。 然后 importstyles.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 导入样式

如果你想从 node_modules 导入 CSS 文件,你必须在 pages/_app.js 中进行。

添加组件级 CSS

Next.js 通过 [name].module.css 文件命名约定来支持 CSS Modules

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

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

例如,假设 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 文件,导入并使用上述 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 Modules 是一项可选功能仅对带有 .module.css 扩展名的文件启用。 普通的 <link> 样式表和全部 CSS 文件仍然是被支持的。

在生产环境中,所有 CSS Module 文件将被自动合并为多个经过精简和代码分割的 .css 文件。 这些 .css 文件代表应用程序中的热执行路径,从而确保为应用程序绘制页面加载所需的最少的 CSS。

Sass 支持

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

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

npm install sass

对 Sass 的支持与上述内置 CSS 的支持具有相同的好处和限制。 Sass support has the same benefits and restrictions as the built-in CSS support detailed above.

注意: Sass支持两个不同的语法,每个都有自己的扩展名。 .scss 扩展需要你使用SCSS语法。 而 .sass 扩展名要求你使用缩进语法 ("Sass")

如果你不确定选择哪一个,请从 .scss 扩展开始,它是CSS的超集,不需要学习缩进语法 ("Sass")。

自定义 Sass 参数

如果要配置 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

我们包含了 styled-jsx 以支持范围隔离的 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

它是否在禁用JavaScript的情况下工作?

是的,如果禁用了 JavaScript,CSS 仍然会被加载到产品构建中(next start)。在开发过程中,我们需要启用 JavaScript,以提供最佳的开发体验与快速刷新

相关内容

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