在vite項(xiàng)目中磷瘤，有時(shí)候我們需要全局引入css變量敏晤、scss變量桨吊，或者引入全局scss樣式文件威根，vite提供了以下這種配置方式
//vite.config.js
css: {
preprocessorOptions: {
//define global scss variable
scss: {
additionalData: `@import '@/styles/variables.scss';`,
},
},
}
這種寫法沒有任何問題，并且我已經(jīng)在一些項(xiàng)目中實(shí)踐過了视乐，可有一次我創(chuàng)建新項(xiàng)目的時(shí)候卻無效了洛搀，在瀏覽器上也沒有看到任何相關(guān)的樣式，但是在main.js中引入又是正常的
我先是排查寫法和路徑是否有問題佑淀，然后排查sass或者vite的版本是否有問題留美，排查幾個(gè)小時(shí)下來發(fā)現(xiàn)都沒有問題，納悶不已伸刃，唯一能確定的是vite的問題
于是我就想谎砾，也許別人也碰到過這種問題，當(dāng)我找遍各大博客網(wǎng)站都沒答案后（一大堆妥協(xié)說直接在main.js引入就好的）奕枝，我準(zhǔn)備去Vite倉庫提各Issue
當(dāng)我嘗試查一下有沒有類似的Issue時(shí)棺榔，發(fā)現(xiàn)竟然有好幾個(gè)類似的Issue瓶堕，還是關(guān)閉狀態(tài)隘道，難道這個(gè)問題已經(jīng)解決了？我一個(gè)一個(gè)點(diǎn)開看郎笆，終于在其中一個(gè)Issue中找到了答案
原來這不是一個(gè)bug谭梗，只有在main.js引入一個(gè)其他scss文件或者在.vue文件中使用<style lang="scss"><style>，并且里面有內(nèi)容宛蚓，則 scss.additionalData 配置的全局scss文件就可以正確引入了激捏，還建議我們在 scss.additionalData 引入的文件最好只寫scss變量，別寫css變量凄吏，因?yàn)閏ss變量是運(yùn)行時(shí)屬性
至此远舅，這個(gè)問題算是圓滿解決了
最近我開源了一個(gè)Vite+Vue3+NaiveUI+Pinia的輕量級后臺管理模板闰蛔，非常適用于中小型項(xiàng)目或者個(gè)人項(xiàng)目，感興趣的可以看下图柏，歡迎參與開源序六、star、fork
文章：
Vite+Vue3+NaiveUI+Pinia搭建一套優(yōu)雅的后臺管理模板蚤吹，真香 - 掘金 (juejin.cn)
預(yù)覽：
源碼：
