Встроенная поддержка CSS

Next.js позволяет импортировать файлы CSS из файла JavaScript. Это возможно, потому что Next.js расширяет концепцию importJavaScript.

Добавление глобальной таблицы стилей

Чтобы добавить таблицу стилей в приложение, импортируйте файл 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, импорт файла 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 '@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 идеальным способом включения 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 будут автоматически объединены во множество минифицированных файлов и .css файлов с разделением кода. Эти .css файлы представляют собой горячие пути выполнения в вашем приложении, обеспечивая загрузку минимального количества CSS для отрисовки вашего приложения.

Поддержка Sass

Next.js позволяет импортировать Sass с использованием .scss и .sass расширений. Вы можете использовать Sass на уровне компонентов через модули CSS и расширение .module.scss или .module.sass.

Прежде чем вы сможете использовать встроенную поддержку Sass в Next.js, обязательно установите sass:

npm install sass

Поддержка Sass имеет те же преимущества и ограничения, что и встроенная поддержка CSS, описанная выше.

Настройка параметров Sass

Если вы хотите настроить компилятор Sass, вы можете сделать это с помощью sassOptions в next.config.js.

Например, чтобы добавить 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

Можно использовать любое существующее решение CSS-in-JS. Самый простой - встроенные стили:

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

Мы связываем styled-jsx, чтобы обеспечить поддержку CSS с изолированной областью видимости. Цель состоит в том, чтобы поддерживать «теневой 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

Вопросы-Ответы

Работает ли он с отключенным JavaScript? Да, если вы отключите JavaScript, CSS все равно будет загружен в производственную сборку (next start). Во время разработки мы требуем, чтобы JavaScript был включен, чтобы обеспечить максимальное удобство для разработчиков с помощью быстрого обновления.