Работа со SCSS в проектах на Vue для стилизации

Введение

SCSS — это мощный препроцессор для CSS, который расширяет стандартные возможности каскадных таблиц стилей такими инструментами, как переменные, вложенность, миксины и функции. Использование SCSS в проектах на Vue открывает дополнительные возможности по организации и масштабированию стилей, помогает писать код быстрее и структурированнее.

В этой статье подробно разберем, как интегрировать SCSS в проект Vue, как использовать переменные, миксины и вложенность, а также рассмотрим практические примеры и лучшие подходы к стилизации компонентов. Вы поймете, как автоматически подключать общие стили, грамотно использовать SCSS в однострочных компонентах и избегать распространенных ошибок.

Что такое SCSS и почему стоит его использовать с Vue

SCSS — это один из двух основных синтаксисов препроцессора Sass. В отличие от стандартного CSS, SCSS позволяет использовать переменные, миксины, функции и вложенные правила. Vue, с другой стороны, поддерживает различные языки написания стилей прямо «из коробки». Вот почему связка Vue + SCSS становится популярной: SCSS делает ваши стили более гибкими, а Vue позволяет изолировать их на уровне компонентов.

С помощью SCSS легче создавать дизайн-системы, управлять темами и избавляться от дублирования кода. Особенно в средних и крупных приложениях такая гибкость становится не просто удобством, а необходимостью.

Подключение SCSS к Vue проекту

Установка зависимостей

Для начала давайте разберемся, как добавить поддержку SCSS в ваш проект на Vue. Если вы создаете проект с помощью Vue CLI (стандартный способ), то большинство настроек уже будет готово.

Запустите такую команду для установки необходимых пакетов:

npm install -D sass sass-loader
# или через yarn
yarn add -D sass sass-loader

• sass — это основной движок, который компилирует SCSS в CSS.
• sass-loader — связывает Sass с вашей системой сборки (обычно Webpack).

Вы можете проверить актуальные версии пакетов, если используете Vue 3 (Vue CLI 5 и Webpack 5), обязательно ставьте совместимые версии.

Проверка настроек сборки

Если проект был создан через Vue CLI, больше никаких изменений в настройках обычно не требуется. Vue CLI автоматически конфигурирует обработку файлов .scss.

Если вы работаете c Vite, в большинстве случаев достаточно просто установить sass:

npm install -D sass
# или
yarn add -D sass

Vite сам распознает SCSS в соответствующих секциях <style lang="scss"> ваших компонентов.

Структура проектов и рекомендации

Обычно SCSS-файлы располагаются в папке src/styles. Вот как может выглядеть структура:

src/
 ├─ assets/
 ├─ components/
 ├─ styles/
 │   ├─ _variables.scss    // переменные и цвета
 │   ├─ _mixins.scss       // миксины и функции
 │   ├─ _base.scss         // базовые стили, сбросы
 │   └─ main.scss          // основной файл-импортёр
 └─ App.vue

Файлы SCSS, имена которых начинаются с нижнего подчеркивания (например, _variables.scss), считаются частичными и не компилируются в отдельный CSS — они нужны только для импорта.

Использование SCSS внутри Vue компонентов

Самый часто используемый способ — писать SCSS прямо внутри компонентов Vue.

Пример использования:

<template>
  <button class="fancy-button">Кнопка</button>
</template>

<style lang="scss" scoped>
$fancy-color: #42b983; // объявление переменной SCSS

.fancy-button {
  padding: 10px 20px;
  color: #fff;
  background-color: $fancy-color; // использование переменной
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s;

  &:hover {
    background-color: darken($fancy-color, 10%); // использование SCSS функции
  }
}
</style>

• Директива lang="scss" сообщает сборщику, что стили внутри написаны на SCSS.
• Часто используется scoped — это ограничивает область видимости стилей только этим компонентом.

Как видите, синтаксис SCSS доступен прямо внутри файла Vue. SCSS позволяет использовать вложенность, переменные, миксины и другие мощные инструменты.

Импорт общих SCSS-ресурсов во все компоненты

Почему это важно

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

Как подключить общие SCSS-файлы глобально

Самый удобный способ для Vue CLI — воспользоваться настройкой css.loaderOptions в файле vue.config.js:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`
      }
    }
  }
}

• Директива @import указывает на файлы с переменными и миксинами.

Давайте разберу подробней: этот способ гарантирует, что переменные, функции и миксины всегда доступны в каждом блоке <style lang="scss"> каждого компонента, без необходимости проводить импорт в каждом файле вручную.

Если используете Vite, настройка выглядит так (в vite.config.js):

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/_variables.scss";`
      }
    }
  }
});

• Здесь также через опцию additionalData SCSS-код подставляется в начало каждого файла стилей.

Рекомендации по структуре SCSS

Лучше хранить переменные, миксины, функции, сбросы отдельно, а импортировать их в нужном порядке в основном SCSS-файле.

Пример организованных частичных файлов SCSS

// _variables.scss — только переменные цветов, шрифтов и размеров
$primary-color: #42b983;
$secondary-color: #35495e;

// _mixins.scss — полезные функции и миксины
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// _base.scss — базовые сбросы и типографика
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

// main.scss — основной файл для импортов
@import 'variables';
@import 'mixins';
@import 'base';

Импортируйте потом только main.scss для подключения всех базовых стилей.

Примеры практического использования SCSS в Vue

Использование SCSS-переменных

Посмотрите простой пример глобальной переменной цвета, доступной во всех компонентах:

<template>
  <div class="hero">Приветствие!</div>
</template>

<style lang="scss" scoped>
.hero {
  color: $primary-color; // переменная берется из общих SCSS
  font-weight: bold;
  padding: 20px;
}
</style>

Вся суть — вы не пишете хардкод, а управляете цветами из одного места.

Использование миксинов в компонентах

Еще один пример — как переиспользовать миксины:

<template>
  <div class="centered">
    Контент в центре
  </div>
</template>

<style lang="scss" scoped>
.centered {
  @include flex-center; // вызов миксина из общих стилей
  height: 100vh;
}
</style>

@import миксинов глобально делает их доступными во всех блоках SCSS.

Вложенность селекторов

SCSS позволяет делать внутренние селекторы короче и аккуратнее:

.form {
  margin: 20px;
  input {
    border: 1px solid $primary-color;
    &:focus {
      border-color: darken($primary-color, 10%);
    }
  }
}

Использование SCSS-функций

С помощью встроенных функций SCSS можно модифицировать цвета или значения прямо на месте:

.btn {
  background-color: lighten($primary-color, 15%);
  color: $secondary-color;

  &:active {
    background-color: darken($primary-color, 15%);
  }
}

Работа с динамической темой и SCSS

Почему тема — актуальный вопрос

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

Использование SCSS для управления темами

Для решения этой задачи удобно использовать SCSS карту (map) с цветами, и быстро переключать тему за счет изменения CSS Custom Properties.

Пример структуры для переключения темы

// _themes.scss
$themes: (
  light: (
    bg: #fff,
    text: #222
  ),
  dark: (
    bg: #222,
    text: #fff
  )
);

@mixin theme($name) {
  $theme: map-get($themes, $name);
  background-color: map-get($theme, bg);
  color: map-get($theme, text);
}

Далее в компоненте:

.page-light {
  @include theme(light);
}
.page-dark {
  @include theme(dark);
}

• Так просто вы достигаете переключения тем — достаточно сменить класс на корневом элементе.

Расширенные возможности SCSS в Vue

Импорт сторонних SCSS-библиотек

Часто в проектах используются библиотеки вроде Bootstrap, Bulma или UI kit-ы, которые могут быть подключены и как SCSS-файл.

Пример импорта Bootstrap SCSS в main.scss:

@import '~bootstrap/scss/bootstrap'; // импортируем SCSS из node_modules

• Сборщик развернет все зависимости и добавит Bootstrap переменные и миксины.

Решение конфликта имен стилей с помощью scoped и :deep()

Vue-проект обычно использует атрибут scoped для ограничения области видимости стилей. Но если вы хотите стилизовать дочерний компонент, применяя SCSS, используйте псевдоселектор :deep.

.parent {
  :deep(.child) {
    color: $secondary-color;
  }
}

• Такой подход актуален для ручной стилизации сложных дерево-компонентов.

Оптимизация размера стилей

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

Линтинг и автоматизация стилей SCSS в Vue

Для поддержки чистоты кода и предотвращения опечаток полезно использовать инструменты автоматической проверки.

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

Установите stylelint, плагин для SCSS и конфиг:

npm install --save-dev stylelint stylelint-scss stylelint-config-standard-scss

Добавьте файл .stylelintrc.json с настройками:

{
  "extends": "stylelint-config-standard-scss",
  "rules": {
    "color-no-invalid-hex": true,
    "at-rule-no-unknown": null
  }
}

Теперь вы сможете запускать линтер отдельно или в составе CI процессов.

Использование prettier для форматирования SCSS

Prettier поддерживает SCSS-файлы. Достаточно добавить .prettierrc и убедиться, что ваш редактор форматирует их автоматически.

Типичные ошибки и рекомендации

• Не используйте хардкод цветов и размеров — заведите переменные SCSS;
• Импортируйте миксины и функции глобально, а не в каждом компоненте;
• Не злоупотребляйте глобальными стилями — изолируйте стили на уровне компонента, где это возможно;
• Если используете сторонние библиотеки, переопределяйте переменные SCSS до их импорта (например, для Bootstrap);
• Вложенность делайте разумной: глубина более 3-4 уровней затрудняет сопровождение;
• Старайтесь группировать SCSS-файлы логически — темы, переменные, сбросы, утилиты.

Итоги

SCSS отлично интегрируется с Vue и делает вашу работу с CSS в разы эффективнее. Правильное подключение SCSS, грамотная организация структуры файлов, использование переменных, миксинов и функций — все это помогает создавать масштабируемые и поддерживаемые интерфейсы. Не забывайте про линтинг, автоматизацию и изоляцию стилей, чтобы поддерживать качество вашего кода на высоком уровне.

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

Как добавить несколько SCSS-файлов в additionalData, чтобы они были доступны во всех стилях компонента?

Укажите несколько @import через точку с запятой внутри строки additionalData:

additionalData: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`

Эта строка подключит оба файла во все стили SCSS.

Почему переменные SCSS из глобального файла недоступны в style внутри компонента?

Проверьте настройку additionalData. Если используете Vite или Vue CLI, только она гарантирует автоматическую загрузку переменных во все компоненты. Без этого приходится импортировать переменные вручную в каждом компоненте.

Как использовать SCSS во Vue, если проект создается через Vite?

Установите только пакет sass. Vite автоматически понимает <style lang="scss"> и не требует sass-loader.

npm install -D sass

Можно ли использовать CSS modules с SCSS во Vue?

Да, добавьте атрибут module в блок стилей:

<style lang="scss" module>

Теперь классы будут доступны как импортированные объекты в скрипте компонента.

Как обновить переменные SCSS по теме без перезагрузки страницы, например для смены темы?

SCSS компилируется на этапе сборки, переменные нельзя менять во время работы приложения. Используйте CSS custom properties (переменные CSS) и оперируйте ими в рантайме Vue. Если нужно переключать темы динамически, объявите основные цвета как CSS custom properties, а не SCSS-переменные.