How to use scss variables like $red,$bgColor etc. in js with vite2 and vue?

When I use webpack to import variables from scss is work:

/* variable.scss*/
$red:'#123456'
:export{
    navibarText:$red
}

and I can import it and use in javascript:

import variables from '@/styles/variables.scss'
console.log(variables.$navibarText)

I couldnt import scss and use it like above correctly in javascript in vite,How to use scss variables like $red,$bgColor etc. in js with vite2 and vue?