Поддерживаются ли модули CSS в Vuejs?vue-110

Да, Vue.js полностью поддерживает CSS-модули (CSS Modules), что предоставляет мощный механизм изоляции стилей на уровне компонентов.

Основные способы использования CSS-модулей

1. Использование в SFC

<template>
  <div :class="$style.myClass">Элемент с модульным стилем</div>
</template>

<style module>
.myClass {
  color: #42b983;
  font-size: 16px;
}
</style>

2. Настройка имени модуля

Можно задать кастомное имя для объекта классов:

<style module="classes">
.myClass {
  /* ... */
}
</style>

<template>
  <div :class="classes.myClass"></div>
</template>

3. Использование с пре-процессорами

<style module lang="scss">
.$primaryColor: #42b983;

.myClass {
  color: $primaryColor;
}
</style>

Конфигурация в проекте

Для кастомной настройки в vue.config.js:

module.exports = {
  css: {
    modules: {
      localIdentName: '[path][name]__[local]--[hash:base64:5]',
      // Другие параметры
    }
  }
}

Преимущества CSS-модулей в Vue

1. Полная изоляция стилей без необходимости в scoped
2. Явные зависимости классов в шаблоне
3. Поддержка композиции стилей
4. Интеграция с TypeScript для проверки типов

Пример композиции классов

<style module>
.base {
  padding: 1rem;
}

.primary {
  composes: base;
  background-color: var(--primary);
}
</style>

TypeScript поддержка

Для автодополнения и проверки типов:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  computed: {
    $style: {
      get(): { myClass: string } {
        return {}
      }
    }
  }
})
</script>

Сравнение с scoped стилями

Характеристика	CSS-модули	Scoped CSS
Изоляция	Полная	Частичная
Глобальные стили	Через :global()	Отдельный тег style
Динамические классы	Через объект $style	Стандартный синтаксис
Поддержка в JS/TS	Отличная	Ограниченная

Особенности работы

1. Имена классов автоматически генерируются (можно настроить)
2. Глобальные селекторы доступны через :global()
3. Доступ из JavaScript к сгенерированным именам классов

Резюмируем:

• Vue.js имеет встроенную поддержку CSS-модулей
• Альтернатива scoped стилям с лучшей изоляцией
• Идеально подходит для TypeScript-проектов
• Позволяет композицию стилей через composes
• Настраивается через vue.config.js
• Рекомендуется для сложных проектов с множеством компонентов