如何生成vite的vue項(xiàng)目，網(wǎng)上教程已經(jīng)有很多，在此就不多說了，在此聊一聊在剛接觸vite時(shí)，配置scss所遇到的問題。

首先執(zhí)行初始化項(xiàng)目命令，并安裝依賴，運(yùn)行項(xiàng)目：

 npm init @vitejs/app vite-test 
 cd vite-test 
 npm install
 npm run dev

創(chuàng)建src/assets/styles/test1.scss文件

寫入樣式內(nèi)容：

body {    
    background-color: pink;    
    color: orange;
}

安裝sass

npm install sass -D

修改vite.config.ts配置文件，配置引入scss

此時(shí)發(fā)現(xiàn)頁面并未應(yīng)用樣式

然后創(chuàng)建src/assets/styles/test2.scss文件，并在main.ts入口文件引入

如果你的項(xiàng)目遇到了此類報(bào)錯(cuò)，或者其他莫名其妙的報(bào)錯(cuò)

可能是因?yàn)閟ass版本過高導(dǎo)致的。

卸載sass，試試安裝版本低一些的sass。

本次示例使用的sass@1.32.6版本。

當(dāng)在main.ts中引入后，發(fā)現(xiàn)在vite配置引入的scss樣式應(yīng)用成功。

可能是項(xiàng)目中引用scss文件時(shí)才會(huì)觸發(fā)vite的scss配置，具體原理尚未搞清，在此給遇到此問題的新手一個(gè)解決參考。