В Vue компонентах можно подключать стили, специфичные только для конкретного компонента, используя различные подходы. Самый распространённый и рекомендуемый способ — это использовать тег <style scoped>, но также возможны более гибкие и продвинутые методы, включая CSS-модули, динамическое подключение классов, использование препроцессоров (SCSS, LESS), а также подключение стилей через JavaScript или инъекцию глобальных стилей только для определённого компонента.

Использование <style scoped>

Когда ты добавляешь в .vue файл блок <style scoped>, Vue автоматически модифицирует селекторы CSS так, чтобы они применялись только к текущему компоненту. Это делается путём добавления уникального data-атрибута ко всем элементам в шаблоне и селекторам.

Пример:

<template>
<div class="card">
<h2>Заголовок</h2>
<p>Описание</p>
</div>
</template>
<style scoped>
.card {
border: 1px solid #ccc;
padding: 1rem;
border-radius: 5px;
}
.card h2 {
color: teal;
}
</style>

В скомпилированном HTML Vue добавит специальный атрибут (например, data-v-123abc) ко всем DOM-элементам в этом компоненте и CSS-селекторам:

<div class="card" data-v-123abc>
<h2 data-v-123abc>Заголовок</h2>
<p data-v-123abc>Описание</p>
</div>

А CSS будет выглядеть так:

.card\[data-v-123abc\] {
...
}
.card h2\[data-v-123abc\] {
...
}

Это гарантирует, что стили применяются только к этому компоненту.

Особенности и ограничения scoped

1. Селекторы не проникают в дочерние компоненты. Если хочешь стилизовать что-то внутри слота или дочернего компонента, scoped не поможет — потребуется использовать глубокие селекторы (::v-deep).

2. Нельзя использовать глобальные теги напрямую. Например, стили для body, html, button и других глобальных элементов внутри <style scoped> будут ограничены текущим компонентом и, скорее всего, не подействуют, как ты ожидаешь.

Глубокая вложенность: ::v-deep

Если нужно применить стили к дочернему компоненту или элементу внутри слота, используется специальный селектор ::v-deep.

Пример:

<style scoped>
::v-deep .child-element {
color: red;
}
</style>

Можно использовать также короткую запись:

<style scoped>
:deep(.child-element) {
color: red;
}
</style>

Это позволяет обойти ограничение изоляции.

Использование CSS-модулей (в Vue CLI и Vite)

Если проект поддерживает CSS-модули, можно использовать их с module атрибутом:

<template>
<div :class="$style.wrapper">Пример</div>
</template>
<style module>
.wrapper {
background-color: #f9f9f9;
padding: 10px;
}
</style>

Vue автоматически преобразует классы в уникальные имена и даёт к ним доступ через объект $style.

Результат:

HTML: <div class="wrapper_xyz123">  
CSS: .wrapper_xyz123 { ... }

Использование препроцессоров (scss, less, stylus)

Vue поддерживает препроцессоры из коробки, если проект настроен соответствующим образом (например, в vue-cli, vite или Nuxt).

<style scoped lang="scss">
.card {
border: 1px solid #ccc;
padding: 1rem;
h2 {
color: orange;
}
}
</style>

Чтобы это работало, должен быть установлен препроцессор (например, sass и sass-loader).

Динамическое применение стилей через привязку классов и стилей

Вместо описания в <style> можно динамически управлять классами и стилями из JavaScript части:

<template>
<div :class="{ active: isActive }" :style="{ color: textColor }">Привет</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
textColor: 'blue'
}
}
}
</script>
<style scoped>
.active {
font-weight: bold;
}
</style>

Подключение внешних CSS-файлов только для компонента

Так делать не всегда удобно, но можно импортировать стили прямо в <script>:

<script>
import './MyComponent.css';
export default {
// компонент
}
</script>

Если этот импорт сделать только в компоненте, стили применятся только тогда, когда компонент будет загружен, но они всё равно попадут в общий CSS-бандл, если сборка не разделяет чанки.

Использование Vue composables и динамической инъекции стилей

Стили можно программно вставлять через JavaScript. Это более редкий приём, чаще используется в библиотеках.

const style = document.createElement('style');

style.innerText = \`.my-special-class { background: pink; }\`;

document.head.appendChild(style);

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

Использование <style scoped lang="postcss">

Если ты используешь PostCSS или Tailwind CSS, можно включить конфигурацию через lang="postcss" или просто использовать utility-классы Tailwind, не подключая стили вручную.

Адаптация под SSR и Hydration

При серверном рендеринге (SSR) Vue корректно обрабатывает scoped-стили и изоляцию. Однако при использовании кастомных решений важно убедиться, что стили синхронизируются на клиенте и сервере.

Уникальные классы руками

Иногда разработчики создают уникальные классы вручную и применяют их только в нужных компонентах, как альтернатива scoped:

<template>
<div class="my-comp-123-box">
...
</div>
</template>
<style>
.my-comp-123-box {
...
}
</style>

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

Vue предоставляет мощные возможности для изоляции стилей, и большинство задач удобно решается с помощью scoped, v-deep и/или CSS Modules. Эти подходы позволяют писать переиспользуемые, масштабируемые и визуально независимые компоненты, не создавая конфликтов в глобальном пространстве стилей.