内置 CSS 支持:基本 CSS 示例及使用 Tailwind CSS(Built in CSS support: basic CSS examples and tailwind CSS)

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

import

添加全局样式表

要将样式表添加到您的应用程序,请在 .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

node_modules

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

node_modules

对于全局样式表,例如或,您应该将文件导入. 例如:

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

然后,创建、导入和使用上述 CSS 文件:

components/Button.js
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 模块是一项可选功能,仅对扩展名为. 仍然支持常规样式表和全局 CSS 文件。

.module.css
<link>

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

.css
.css

Sass 支持

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

.scss
.sass
.module.scss
.module.sass

在使用 Next.js 的内置 Sass 支持之前,请务必安装:

sass
npm install sass

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

注意:Sass 支持两种不同的语法,每种都有自己的扩展名。该扩展需要您使用SCSS语法,同时扩展需要您使用缩进语法(“萨斯”) 。
如果您不确定选择哪个,请从CSS 超集的扩展开始,并且不需要您学习缩进语法(“Sass”)。

注意:Sass 支持两种不同的语法,每种都有自己的扩展名。该扩展需要您使用SCSS语法,同时扩展需要您使用缩进语法(“萨斯”) 。

.scss
.sass

如果您不确定选择哪个,请从CSS 超集的扩展开始,并且不需要您学习缩进语法(“Sass”)。

.scss

自定义 Sass 选项

如果你想配置 Sass 编译器,你可以使用in 来完成。

sassOptions
next.config.js

例如添加:

includePaths
const path = require('path')

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

Sass 变量

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

例如,使用导出的Sass 变量:

primaryColor
/* 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
————————

Next.js allows you to import CSS files from JavaScript files. This is possible because next. JS extends concepts beyond JavaScript. Catering franchise

import

Add global style sheet

To add a style sheet to your application, import the CSS file in the. CSS file.

pages/_app.js

For example, consider the following style sheet named:

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

If the file does not exist, a file is created. Then, the file.

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

These styles(  ) Will be applied to all pages and components in the application. Due to the global nature of style sheets and to avoid conflicts, you < strong > can only import them into < / strong >

styles.css
pages/_app.js

In development, expressing style sheets in this way allows you to hot reload styles while editing them — which means you can keep the application state.

In production, all CSS files will be automatically connected into a reduced file.

.css

导入样式 node_modules

node_modules

From next.js  < Strong > starting from 9.5.4 < / strong >, CSS files can be imported from anywhere in the application.

node_modules

For global style sheets, such as or, you should import the file   For example:

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

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

To import the CSS required by third-party components, you can do this in your component. For example:

// 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>
  )
}

Add component level CSS

Next.js supports CSS modules that use file naming conventions.

[name].module.css

CSS modules act locally on CSS by automatically creating unique class names. This allows you to use the same CSS class name in different files without worrying about conflicts.

This behavior makes CSS modules an ideal way to include component level CSS. CSS module files < strong > can be imported to any location of the application < / strong >.

For example, consider a reusable component in a folder:

Button
components/

First, create the following:

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

Then, create, import, and use the above CSS files:

components/Button.js
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 is an optional function, < strong > only for the extension < / strong >   Regular style sheets and global CSS files are still supported.

.module.css
<link>

In production, all CSS module files will be automatically connected into < strong > many < / strong > reduced and code split < / strong >   File. These files represent the hot execution path in your application, ensuring that your application loads a minimum of CSS for drawing.

.css
.css

Sass 支持

Next. JS allows you to import sass with and extensions  。 You can use component level sass through CSS modules and or extensions  。

.scss
.sass
.module.scss
.module.sass

Before using the built-in sass support of next.js, be sure to install:

sass
npm install sass

Sass support has the same advantages and limitations as the built-in CSS support detailed above.

< strong > note < / strong >: sass supports two different grammars, each with its own extension. The extension requires you to use SCSS syntax, and the extension requires you to use indentation syntax (“sass”)  。
If you’re not sure which to choose, start with the extension of the CSS superset, and you don’t need to learn indentation syntax (“sass”).

< strong > note < / strong >: sass supports two different grammars, each with its own extension. The extension requires you to use SCSS syntax, and the extension requires you to use indentation syntax (“sass”)  。

.scss
.sass

If you’re not sure which to choose, start with the extension of the CSS superset, and you don’t need to learn indentation syntax (“sass”).

.scss

Customize sass options

If you want to configure the sass compiler, you can use in.

sassOptions
next.config.js

For example, add:

includePaths
const path = require('path')

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

Sass 变量

Next.js supports sass variables exported from CSS module files.

For example, use the exported sass variable:

primaryColor
/* 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

例子

You can use any existing CSS in JS solution. The simplest is the inline style:

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

export default HiThere

We bundled styled JSX to provide support for isolated scope CSS. The purpose is to support “shadow CSS” similar to web components. Unfortunately, it does not support server rendering and only supports JS.

For other popular CSS in JS solutions, such as stylized components, see the example above.

The components used are as follows:

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

For more examples, see the styled JSX documentation.

Often ask questions

Does it work with JavaScript disabled?

Yes, if you disable JavaScript, CSS will still be in production(  ) Load in

next start