Стилизация CSS в Next.js

В Next.js использование стилей очень гибкое; мы можем выбрать различные способы добавления стилей в ваше приложение.

Глобальные стили

Глобальные стили — это CSS-стили, которые влияют на всё приложение. Обычно они используются для задания базовых стилей страницы, таких как шрифты, цвета, макет и т. д.

Next.js импортирует глобальные CSS-файлы в app/layout.tsx.

По умолчанию в каталоге app уже есть глобальные стили.globals.cssЕсли файла не существует, вы также можете создать новый CSS-файл.

Создайте его в каталоге stylesglobals.cssфайл, затем импортируйте его в app/layout.tsx.

Код файла app/globals.css:

/* app/globals.css */
body {
padding: 20px 20px 60px;
max-width: 680px;
font-size:64px;
margin: 0 auto;
background-color: #F5F5FB;
color: #333;
}

Затем импортируйте этот файл в корневой макет (app/layout.tsx), чтобы применить стили ко всем маршрутам в приложении:

Код файла app/layout.tsx:

// app/layout.tsx
// Эти стили применяются к каждому маршруту в приложении
import './globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>{children}</body>
</html>
)
}

Примечания:Глобальные стили можно импортировать в любой макет, страницу или компонент в каталоге app. Однако, поскольку Next.js использует встроенную поддержку таблиц стилей React для интеграции с Suspense, текущая встроенная поддержка не удаляет таблицы стилей при переходе между маршрутами. Поэтому мы рекомендуем использовать глобальные стили для действительно глобального CSS и CSS Modules для локального CSS.

Код app/page.tsx выглядит следующим образом:

Пример

export default function Home() {
return <div>Hello, Example!</div>;
}

Перейдите на http://localhost:3000/ и результат теста будет следующим:

Sass

Next.js также поддерживает Sass — более функциональный препроцессор CSS.

Если вы предпочитаете использовать Sass для написания стилей, вы можете включить Sass, установив соответствующие зависимости. Подробнее о Sass см. вруководстве по Sass。

Установка:

npm install sass

Next.js интегрируется с Sass, поддерживая расширения и синтаксис .scss и .sass.

Вы также можете использовать Sass на уровне компонентов с CSS Modules, с расширениями .module.scss или .module.sass.

Настройка конфигурации Sass

Если вы хотите настроить параметры Sass, вы можете использовать опцию sassOptions в next.config.js.

Пример

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
sassOptions: {
additionalData: `$var: red;`, // Автоматически внедрять эти стили в каждый Sass-файл
},
}

export default nextConfig

Таким образом, вы можете настроить некоторые данные Sass по умолчанию или задать другие пользовательские настройки.

Создайте файл SCSS, например styles/Button.module.scss:

Пример

/* styles/Button.module.scss */
.button {
padding: 10px 20px;
background-color: #0070f3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

Использование SCSS-модулей в компонентах:

Пример

// app/components/Button.tsx
import styles from '../styles/Button.module.scss';

export default function Button() {
return <button className={styles.button}>Нажми меня</button>;
}

Другие расширения