最近在研究vite+vue3捅厂，在升級(jí)的過(guò)程中發(fā)現(xiàn)蜡豹，vite內(nèi)置的scss預(yù)處理器不支持:export語(yǔ)法右核。import
導(dǎo)入的scss文件销凑，console.log顯示是編譯過(guò)后的整個(gè)css文件的內(nèi)容丛晌。
vue-cli構(gòu)建的項(xiàng)目不存在問(wèn)題，與webpack有關(guān)
查看官方issue斗幼，尤大大說(shuō)‘可能不會(huì)支持任何超出當(dāng)前預(yù)處理器支持范圍的東西澎蛛。使用CSS模塊代替⊥闪’
CSS Modules
創(chuàng)建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)
瀏覽器打印的結(jié)果是
{
red: "_red_r0sk3_1",
green: "_green_r0sk3_5"
}
頁(yè)面調(diào)用(vue2的用法)
<p :class="color">字體顏色</p>
data() {
return {
color: variables.green
}
},
效果圖：
1629948031907.jpg
