vite vue中 如何引入 scss变量?

• Z时代
• 2024-03-12
• 分类：IT

vue-cli以前可以这样:

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

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

vite中该怎么做呢。

preprocessorOptions并不能解决这个问题。

回答：

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

回答：

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>

以上是 vite vue中 如何引入 scss变量? 的全部内容， 来源链接： utcz.com/p/936257.html