Введение в стилизацию в Nuxt

В Vue мы уже задаём вид блоков прямо в файле компонента: цвет кнопки, отступы карточки, размер заголовка на одной странице. Так удобно оформлять то, что относится только к этому фрагменту разметки и не должно повторяться на всём сайте.

У реального проекта есть и другой слой стилей. Один и тот же фон страницы, шрифт в тексте, цвет ссылок в меню и оформление шапки должны совпадать на главной, в каталоге и на странице контактов. Если дублировать эти правила в каждом файле pages и в макете, любая смена палитры превращается в правку десятков мест.

Для таких повторяющихся правил в Nuxt используют отдельный глобальный файл стилей. В нём описывают базовый вид body, общие классы для шапки и навигации из app/layouts, типовые отступы и цвета ссылок. Подключив файл один раз в конфигурации, мы получаем единый стиль для всего приложения, а страницы остаются сосредоточены на своём содержимом.

Глобальные стили хорошо сочетаются с макетом по умолчанию и меню из NuxtLink: каркас сайта рисуется один раз, а классы из общей таблицы стилей задают его внешний вид. Локальные блоки style в компонентах по-прежнему подходят для деталей, которые не нужно разносить по всему проекту.

Отдельно стоит упомянуть CSS фреймворк Tailwind. Он не заменяет идею общего файла, а даёт набор готовых утилитарных классов для быстрой вёрстки поверх тех же страниц и макетов.

Все примеры опираются на уже знакомую структуру: страницы в app/pages, оболочка в app/layouts/default.vue, корень в app/app.vue с NuxtLayout и NuxtPage. Так проще увидеть, как общие стили влияют на каждый адрес при обычном npm run dev.