SCSS модули Vue 3 TypeScript: вложенные селекторы &
Как добиться полной типизации SCSS модулей в Vue 3 с TypeScript для BEM-синтаксиса с '&'. Настройка Vite/Webpack, генерация .d.ts, плагины для вложенных классов без дублирования.
Как добиться полной поддержки SCSS модулей в Vue 3 с TypeScript для вложенных селекторов с использованием ‘&’?
В Vue 3 настроены SCSS модули. При использовании такого синтаксиса:
<style module lang="scss">
.root {
&__header {
/* стили */
}
}
</style>
В runtime класс root__header генерируется корректно и доступен через $style.root__header. Однако TypeScript не видит этот класс в $style (помимо .root), выдавая ошибку. Если писать явно .root__header внутри .root, то TS распознает оба класса.
Как сохранить BEM-синтаксис с ‘&’ без дублирования классов? Какие настройки Vite/Webpack, типы TypeScript или плагины нужны для правильной типизации вложенных SCSS-классов в Vue 3?
Самый надёжный путь — вынести SCSS в внешний файл *.module.scss и генерировать декларации типов для SCSS модулей (или подключить TS‑плагин), тогда TypeScript увидит все классы, включая те, которые формируются через ‘&’ (BEM), без дублирования. Для Vite обычно используют настройку css.modules + генератор .d.ts или плагин типа typescript-plugin-css-modules; для Webpack — генерация .d.ts через loader (например, typings-for-css-modules-loader) или отдельный генератор типов. Также можно временно использовать объявление модуля/каст к типам/useCssModule, но это — обходные решения, а не долгосрочная типизация по ключам.