vite2+vue3引入scss不支持:export

最近在研究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