\n\n\n```\n\nЧто нужно добавить:\n- Файловый генератор типов для SCSS-модулей (или TS‑плагин). В обсуждении шаблона был упомянут вариант с плагином для TypeScript как рабочий путь — см. обсуждение про *typescript-plugin-css-modules* [github discussion](https://github.com/wemake-services/wemake-vue-template/issues/1386).\n- Резервный `shims`‑файл, чтобы сборщик/TS не ругался, пока генератор не создаст конкретные `.d.ts`:\n\nsrc/shims-css.d.ts\n```ts\ndeclare module '*.module.scss' {\n const classes: { [key: string]: string };\n export default classes;\n}\n```\n\nПлюсы этого подхода:\n- Сохраняется BEM и `&` — никакого дублирования.\n- Строго типизированные ключи (если генератор создал `.d.ts`).\n- Работает одинаково в Vite и Webpack.\n\n---\n\n## Vite: типизация SCSS Modules в Vue 3 с TypeScript {#vite}\n\nVite поддерживает CSS Modules «из коробки» и позволяет настроить поведение через `vite.config.ts`. Но Vite сам по себе не генерирует `.d.ts`. Рекомендации:\n\n1. Настройка Vite (пример):\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n plugins: [vue()],\n css: {\n modules: {\n scopeBehaviour: 'local',\n generateScopedName: '[name]__[local]___[hash:base64:5]',\n },\n preprocessorOptions: {\n scss: {}\n }\n }\n});\n```\n2. Генерация типов:\n - Использовать генератор `.d.ts` в режиме watch как часть dev‑скриптов (чтоб редактор видел типы сразу).\n - Или подключить `typescript-plugin-css-modules` в `tsconfig.json` (плагин должен быть установлен в devDependencies и поддерживаться вашим редактором/TS сервером):\n```json\n{\n \"compilerOptions\": {\n // ...\n \"plugins\": [\n { \"name\": \"typescript-plugin-css-modules\" }\n ]\n }\n}\n```\n3. Редактор: если вы используете Volar (рекомендуется для Vue 3), убедитесь, что конфигурация TS‑плагинов поддерживается в окружении редактора — иногда нужно включать «take over mode» или перезапускать TS‑сервер, чтобы плагин подхватывался.\n\nПолезный материал по работе с SCSS в Vue и особенностям CSS‑модулей — в официальной документации и статьях по настройке препроцессоров [SFC CSS Features](https://vuejs.org/api/sfc-css-features) и общие примечания по scss в проектах [Web dev etc пример настройки SCSS](https://webdevetc.com/programming-tricks/vue3/vue3-guides/vue-3-global-scss-sass-variables/).\n\n---\n\n## Webpack / Vue CLI: typings‑for‑css‑modules‑loader и варианты {#webpack}\n\nЕсли вы используете Webpack (Vue CLI или кастомный конфиг), можно генерировать `.d.ts` автоматически через загрузчик в цепочке:\n\nПример правила (упрощённо):\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /.module.(scss|sass)$/,\n use: [\n 'vue-style-loader',\n {\n loader: 'typings-for-css-modules-loader',\n options: {\n modules: true,\n namedExport: true,\n camelCase: true\n }\n },\n 'sass-loader'\n ]\n }\n ]\n }\n};\n```\nStackOverflow обсуждал задачи интеграции типов с Vue CLI и предлагал именно `typings-for-css-modules-loader` или `typings-for-css-modules` подходы для автоматической генерации [пример обсуждения](https://stackoverflow.com/questions/51349481/vue-cli-3-typescript-cannot-import-css-sass-to-the-script-block).\n\nЕсли вы не хотите менять сборку, альтернатива — отдельный генератор `.d.ts` (prebuild/watch), он независим от сборщика и хорошо сочетается с Vite и Webpack.\n\n---\n\n## Inline
Веб

SCSS модули Vue 3 TypeScript: вложенные селекторы &

Как добиться полной типизации SCSS модулей в Vue 3 с TypeScript для BEM-синтаксиса с '&'. Настройка Vite/Webpack, генерация .d.ts, плагины для вложенных классов без дублирования.

1 ответ• 1 просмотр

Как добиться полной поддержки SCSS модулей в Vue 3 с TypeScript для вложенных селекторов с использованием ‘&’?

В Vue 3 настроены SCSS модули. При использовании такого синтаксиса:

vue
<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, но это — обходные решения, а не долгосрочная типизация по ключам.

Содержание