Как лучше добиться полноценной работы SCSS модулей во Vue 3?

SCSS-модули во Vue 3 нормально работают, если проект собран через Vite/Vue CLI и установлен препроцессор Sass. Важно различать обычный scoped SCSS и CSS Modules. Это разные механики: <style scoped lang="scss"> изолирует стили по data-атрибутам, а <style module lang="scss"> создаёт объект классов.

Для Vite установите Sass:

npm install -D sass

Обычный scoped SCSS:

<template>
  <div class="card">Text</div>
</template>
 
<style scoped lang="scss">
.card {
  padding: 16px;
  &:hover {
    color: #2563eb;
  }
}
</style>

CSS Modules во Vue:

<template>
  <div :class="$style.card">Text</div>
</template>
 
<style module lang="scss">
.card {
  padding: 16px;
}
</style>

Если используете Composition API и хотите получить классы в script:

<script setup>
import { useCssModule } from 'vue'
const styles = useCssModule()
</script>

Частая путаница: класс из CSS Modules нельзя писать как обычный class="card", он будет переименован. Нужно использовать $style.card. А для scoped стилей наоборот не нужен $style.

Если нужны глобальные переменные/mixins SCSS, настройте additionalData в Vite, но не импортируйте огромные CSS-файлы в каждый компонент.

Итог: поставьте sass, выберите либо scoped SCSS, либо CSS Modules, и используйте правильный синтаксис. Для большинства компонентов достаточно <style scoped lang="scss">; modules нужны, когда классы должны быть доступны как JS-объект.