typescript - როდესაც Vue3-ში .module.scss იყენებთ, წარმოიშვა TS შეცდომა

მე მაქვს ცვლადი foo.module.scss-ში და მინდა გამოვიყენო ის .vue ფაილებშ. როცა ვიმპორტირებ ცვლადს foo.vue-ში, ვიღებ ts შეცდომას

// foo.vue
<script lang="ts" setup>
// Module '"*.module.scss"' has no exported member 'titleColor'. Did you mean to use 'import titleColor from "*.module.scss"' instead?ts(2614)
import { titleColor } from '@/styles/var.module.scss'

// Even if I output this variable, ts will still report an error
console.log(titleColor)

</script>

// foo.module.scss

$aside-menu-bg: pink;

:export {
  titleColor: $aside-menu-bg;
}

აქ არის ჩემი პროექტის დემო. ეს შეცდომა შეატყობინება, როდესაც კოდი დაიწყება ადგილობრივ vscode-ში ან კოპირებული იქნება იქ.

https://stackblitz.com/edit/vitejs-vite-yidtzb?file=src/App.vue

კარგი, როდესაც ასე ვწერ, შემიძლია სწორად მივიღო ის, რაც მინდა და ავიცილო ანგარიშგების შეცდომები, მაგრამ მივიღებ ბევრ ისეთ რამეს, რაც არ მინდა

// foo.vue
<script lang="ts" setup>
import test from '@/styles/var.module.scss'

// output: a huge object
console.log(test)

</script>

უპასუხე #1

Vite-ის დოკუმენტაციის სექცია CSS მოდულებზე აკეთებს ახსნას, როგორ გააქტიუროთ სახელწოდება ემპორტები.

თქვენ ასევე შეგიძლიათ გამოიყენოთ ობიექტის დესტრუქტურირება:

import scss from '@/styles/var.module.scss'
let { titleColor } from scss