Могу ли я использовать CSS-модули для препроцессоров?

Да, CSS-модули можно использовать с препроцессорами, такими как Sass, Less или Stylus. Это позволяет вам использовать функционал препроцессоров (такие как переменные, вложенность и миксины) вместе с преимуществами CSS-модулей, такими как изоляция стилей и предотвращение конфликтов имен.

Что такое CSS-модули?

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

Как настроить CSS-модули с Sass?

В этом примере мы рассмотрим, как настроить проект Vue с использованием CSS-модулей и Sass.

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

Если у вас еще не установлен Sass, вы можете добавить его в ваш проект Vue, выполнив следующую команду:

npm install -D sass sass-loader

2. Создание компонента с CSS-модулями

Теперь создадим компонент Vue, который будет использовать CSS-модули с Sass:

<template>
  <div :class="$style.container">
    <h1 :class="$style.title">Привет, мир!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

<style module lang="scss">
$primary-color: #42b983;

.container {
  background-color: $primary-color;
  padding: 16px;
}

.title {
  color: white;
  font-size: 24px;
  text-align: center;
}
</style>

Объяснение кода:

• Мы используем <style module lang="scss">, чтобы указать, что это CSS-модули с использованием Sass.
• Переменная $primary-color определена в начале стиля, что позволяет легко изменять цвет фона контейнера.
• Классы container и title будут скомпилированы в уникальные имена и изолированы от других стилей в приложении.

3. Использование в шаблоне

Внутри шаблона, мы используем :class="$style.container" и :class="$style.title", чтобы применить стили к элементам.

Использование CSS-модулей с Less или Stylus

Процесс похож на использование Sass. Для Less:

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

npm install -D less less-loader

2. Создайте компонент, аналогично показанному выше, изменив <style module lang="less"> и адаптировав синтаксис под Less.

Для Stylus:

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

npm install -D stylus stylus-loader

2. Создайте компонент, изменив <style module lang="stylus"> и используя синтаксис Stylus.

Заключение

Использование CSS-модулей с препроцессорами позволяет вам написать более чистый и организованный код, который легко поддерживать. Комбинируя возможности Sass, Less или Stylus с CSS-модулями, вы получаете лучшее из обоих миров: мощь препроцессоров и изоляцию стилей.