Руководство по стилизации приложения на Nuxt с CSS

Введение

Стилизация является неотъемлемой частью разработки современных веб-приложений. В Nuxt, как и во всех проектах на базе Vue, стилизация даёт массу возможностей — от подключения глобальных стилей до использования CSS-модулей или интеграции с популярными CSS-фреймворками. Основываясь на гибкой архитектуре Nuxt, вы можете применить как стандартный CSS, так и препроцессоры, а также CSS-in-JS. Всё это открывает широкие возможности кастомизации без лишней боли и усложнения поддержки стилей. Далее я подробно расскажу, как работаю со стилями на практике именно в Nuxt-проектах.

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

Как работают глобальные стили

Nuxt предполагает организацию стилей на двух уровнях: глобальном (действует на всё приложение) и компонентном (только на определённый компонент). Глобальные стили удобно размещать в отдельных файлах и подключать их из Nuxt-конфигурации. Обычно для этого используют каталог assets.

Подключение глобальных CSS

Вы можете создать файл для глобальных стилей, например, assets/css/main.css, и добавить его путь в настройку css в файле nuxt.config.js или nuxt.config.ts.

Пример настройки:

// nuxt.config.js

export default {
  css: [
    '@/assets/css/main.css', // Подключаем глобальный файл стилей
  ]
}

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

Пример файла main.css

/* assets/css/main.css */

/* Сброс стилей браузера */
body, h1, h2, h3, p, ul {
  margin: 0;
  padding: 0;
}

/* Базовые стили для приложения */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #fafafa;
  color: #222;
}

Стилизация — это неотъемлемая часть разработки любого веб-приложения. Чистый, понятный и эффективный CSS код делает приложение более привлекательным и удобным для пользователей. Глубокое понимание CSS и умение применять его в Nuxt-проектах — это важный навык для любого разработчика. Если вы хотите детальнее погрузиться в мир Nuxt, освоить все его тонкости и стать настоящим профессионалом — приходите на наш большой курс Nuxt - fullstack Vue фреймворк. На курсе 129 уроков и 13 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Локальные стили компонентов

Локальные стили со scoped

Когда вы хотите, чтобы стили применялись только к определённому компоненту, используйте теги <style scoped>. Смотрите пример ниже.

<template>
  <div class="custom-block">
    Привет, тут компонент со своими стилями!
  </div>
</template>

<style scoped>
.custom-block {
  border: 1px solid #3498db;
  padding: 18px;
  color: #3498db;
  border-radius: 6px;
}
</style>

Здесь класс custom-block будет влиять только на текущее содержимое компонента. Nuxt (и Vue под капотом) реализует это за счёт динамической генерации атрибутов.

Если не использовать scoped

Если убрать атрибут scoped, стили распространятся на всё приложение. Используйте этот режим для кастомных библиотек или глобальных тем.

Использование препроцессоров: SCSS/SASS/LESS

Почему стоит использовать препроцессоры

Иногда стандартного CSS не хватает: нужны миксины, вложенность, переменные и функции. Для таких случаев в Nuxt легко добавить поддержку SCSS или другой технологии. Это делается буквально в пару кликов.

Подключение SCSS

1. Установите пакет:

npm install --save-dev sass sass-loader

2. Теперь можно создавать файлы с расширением .scss и использовать их аналогично обычным CSS. Для глобального использования создайте, например, assets/styles/global.scss:

/* assets/styles/global.scss */
$main-color: #00b894;

body {
  background-color: $main-color;
}

3. Подключите его в nuxt.config.js:

export default {
  css: [
    '@/assets/styles/global.scss'
  ]
}

SCSS также можно использовать и в <style lang="scss" scoped> внутри одиночных файлов компонентов.

<template>
  <div class="note">
    Пользовательская заметка
  </div>
</template>

<style lang="scss" scoped>
.note {
  padding: 12px;
  background: lighten($main-color, 10%);
  color: #fff;
}
</style>

Nuxt автоматически обработает этот стиль, если установлен sass-loader.

Автоматическое подключение переменных

Для больших проектов удобно автоматически внедрять переменные в каждый компонент, чтобы не импортировать их вручную. Используйте Nuxt-модуль @nuxtjs/style-resources:

1. Установите модуль:

npm install --save-dev @nuxtjs/style-resources

2. Добавьте в nuxt.config.js:

export default {
  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: [
      '@/assets/styles/variables.scss'
    ]
  }
}

Теперь все переменные и миксины доступны во всех <style lang="scss">.

CSS-модули (CSS Modules)

Введение в CSS-модули

CSS-модули позволяют изолировать стили на уровне класса даже без использования атрибута scoped. Это бывает очень удобно, если вы хотите избежать конфликтов имён или внедрять динамические стили.

Как использовать CSS-модули в Nuxt

В Nuxt вы можете включить модули с помощью <style module>:

<template>
  <button :class="$style.btnBig">Нажми меня!</button>
</template>

<style module>
.btnBig {
  font-size: 32px;
  background: #fed32c;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  cursor: pointer;
}
</style>

Теперь класс .btnBig преобразуется в уникальное имя. Доступ к нему осуществляется через объект $style.

Обратите внимание: если вы используете препроцессор, просто добавьте нужный lang, например: <style lang="scss" module>.

Интеграция CSS-фреймворков (Tailwind, Bootstrap и др.)

Tailwind CSS + Nuxt

Tailwind CSS — популярная утилитарная библиотека, которую легко внедрить с помощью модуля.

1. Установите Tailwind CSS:

npx nuxi@latest module add tailwindcss

или sh npm install -D @nuxtjs/tailwindcss

2. Включите модуль в nuxt.config.js:

export default {
  modules: [
    '@nuxtjs/tailwindcss'
  ]
}

3. Добавьте Tailwind-стили в HTML компонентов:

<template>
  <div class="p-4 bg-blue-200 text-blue-900 rounded">
    Добро пожаловать с Tailwind!
  </div>
</template>

Nuxt сам сгенерирует tailwind.config.js, в котором вы сможете настроить темы, цвета, брейкпоинты и т.д.

Bootstrap

Для Bootstrap используйте официальный модуль:

npm install bootstrap @nuxtjs/bootstrap

Подключите в настройках Nuxt, и стили станут доступны всему приложению.

Динамические стилизация и вычисляемые классы

Часто стилизация не ограничивается статичными классами и требует вычислений на лету.

Применение классов по условиям

В Nuxt/Vue удобно использовать директиву :class:

<template>
  <button :class="['button', { 'is-active': isActive }]">
    Кнопка
  </button>
</template>

<script setup>
import { ref } from 'vue'
const isActive = ref(false)
</script>

<style scoped>
.button {
  padding: 8px 18px;
  background: #eee;
  color: #333;
}
.is-active {
  background: #3498db;
  color: #fff;
}
</style>

Когда переменная isActive становится true, к кнопке добавляется стиль из класса .is-active.

Динамическое применение инлайн-стилей

<template>
  <div :style="{ color: active ? '#27ae60' : '#c0392b', fontWeight: 'bold' }">
    Стилизованный текст
  </div>
</template>

<script setup>
import { ref } from 'vue'
const active = ref(true)
</script>

Использование CSS-in-JS

Сегодня всё больше разработчиков предпочитает CSS-in-JS для динамической стилизации. В Nuxt есть интеграции с различными решениями (например, vue-styled-components или emotion). Пример с vue-styled-components:

1. Установите:

npm install vue-styled-components

2. Используйте в компоненте:

// Импортируем функцию styled
import styled from 'vue-styled-components'

// Создаём уникальный компонент с кастомными стилями
const RedBox = styled('div')`
  background: #e17055;
  padding: 18px;
  border-radius: 4px;
  color: #fff;
`

<template>
  <RedBox>Контейнер со стилями через CSS-in-JS</RedBox>
</template>

<script setup>
import { RedBox } from './styled'
</script>

Этот подход лучше для сложных динамических стилей или стилизации на основании props.

Оптимизация и рекомендации по организации стилей

Структура директорий

• Глобальные стили (reset, базовые переменные) храните в assets/
• Компонентные стили — непосредственно в файлах компонентов
• Фреймворки и сторонние библиотеки устанавливайте через npm и импортируйте глобально

Советы по организации SCSS

• variables.scss — все переменные
• mixins.scss — функции и миксины
• base.scss — резеты, типографика
• components/ — специфичные файлы для частей интерфейса (кнопки, формы и т.д.)

Использование PurgeCSS

Когда используете большие фреймворки, вроде Tailwind, поможет очищать неиспользуемые стили из финального бандла с помощью PurgeCSS (Webpack или Vite обычно делают это автоматически через плагины модулей).

Переиспользование переменных

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

Заключение

Стилизация Nuxt-приложений дает огромную свободу выбора инструментов и подходов. Вы можете сочетать глобальные CSS, компонентные scoped-стили, мощь современных препроцессоров SCSS/LESS, изоляцию через CSS-модули, утилиты Tailwind или Bootstrap, а также динамические и инлайновые стилизации. Разные подходы решают разные задачи, поэтому используйте их ситуативно. При грамотной организации каталогов, автоматизации переменных и применении современных утилит, поддержка стилей становится лёгкой и предсказуемой.

Стилизация с помощью CSS — это лишь один из аспектов разработки Nuxt-приложений. Чтобы создавать полноценные и качественные приложения, необходимо также освоить множество других навыков, таких как работа с компонентами, роутинг, работа с данными и деплой. На курсе Nuxt - fullstack Vue фреймворк вы получите комплексные знания и практический опыт, необходимые для успешной разработки веб-приложений на Nuxt. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир Nuxt прямо сегодня.

Частозадаваемые технические вопросы и ответы

Как добавить PostCSS-плагины (например, autoprefixer или cssnano) к проекту Nuxt?

В Nuxt 3 настройка PostCSS выполняется через файл postcss.config.js в корне проекта. Добавьте необходимые плагины:

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    cssnano: { preset: 'default' }
  }
}

Nuxt сам подхватит этот файл и применит плагины при билде.

Как импортировать сторонний CSS-файл только для одной страницы?

В компоненте страницы импортируйте стиль явно:

<script>
import '~/assets/css/page-special.css'
export default {}
</script>

Стили будут применяться только при монтировании этой страницы.

Как очистить остаточные CSS, если при билде остались неиспользуемые стили?

Ассеты можно оптимизировать с помощью встроенного PurgeCSS — используйте Tailwind или соответствующий плагин для Webpack/Vite. Проверьте настройки, чтобы файлы очищались автоматически, либо установите и настройте @fullhuman/postcss-purgecss.

Почему стили из assets не появляются на страницах?

Проверьте, добавлен ли файл в массив css в nuxt.config.js. Если нет — они никак не встраиваются в головной HTML.

Можно ли использовать CSS Variables (кастомные свойства) вместе со SCSS в Nuxt?

Да. Сначала объявляйте переменные CSS (например, в :root), а далее используйте SCSS-функции для вставки их значений или прямое использование в стилях. SCSS позволяет и смешанное применение стандартных и кастомных переменных для гибких тем.