typescript - בעת שימוש ב-.module.scss ב-vue3, התרחשה שגיאת 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