vite vue中 如何引入 scss变量?

Question

vue-cli以前可以这样:

// scss文件中
:export {
  menutext: $menuText;
  menuactivetext: $menuActiveText;
}

// vue组件中 
import variables from "@/assets/styles/variables.scss";
export default {
   computed: {
      variables: variables
   }
}

vite中该怎么做呢。

preprocessorOptions并不能解决这个问题。

Answer 1

preprocessorOptions
详细参考https://cn.vitejs.dev/config/...

Answer 2

import variables from "@/assets/styles/variables.scss" 后
打印 variables，是个

":export {
  menutext: #333;
  menuactivetext: #666;
}"

的字符串，写个方法转成对象就可以了

新发现

参考CSS Modules

//.module.scss文件
:export {
  menutext: $menuText;
  menuactivetext: $menuActiveText;
}

//vue文件
<script setup>
import variables from '@/styles/variables.module.scss'
console.log(variables)
</script>