Search code examples
typescriptvue.jssassvuejs3vite

How to use my variables.scss in component <style>in vite vue 3

vite.config.ts

vite.config.js

Styles in my component

styles in my component

main.ts

main.ts

I tried using the rules...

i tried to use these rules`

Solution

  • maybe

    1、

    // component
<style lang="scss">
 @import "../../../assets/variable.scss";
</style

    2、

    // main.ts
import './assets/variable.scss'

    3、

    // vite.config.ts
preprocessorOptions: {
   scss: {
     additionalData: '@use "@/assets/variable.scss"as *;'
   }
}

    Use any one of them