最近在研究vite+vue3，在升级的过程中发现，vite内置的scss预处理器不支持:export语法。import
导入的scss文件，console.log显示是编译过后的整个css文件的内容。
vue-cli构建的项目不存在问题，与webpack有关
查看官方issue，尤大大说‘可能不会支持任何超出当前预处理器支持范围的东西。使用CSS模块代替。’
CSS Modules
创建var.module.scss文件
$--default-color: #f00;
.red{
color: $--default-color;
}
.green{
color: #0f0;
}
在app.vue文件中引入
import variables from './styles/var.module.scss'
console.log(variables)
浏览器打印的结果是
{
red: "_red_r0sk3_1",
green: "_green_r0sk3_5"
}
页面调用(vue2的用法)
<p :class="color">字体颜色</p>
data() {
return {
color: variables.green
}
},
效果图：
1629948031907.jpg
