如何生成vite的vue项目，网上教程已经有很多，在此就不多说了，在此聊一聊在刚接触vite时，配置scss所遇到的问题。
首先执行初始化项目命令，并安装依赖，运行项目：
创建src/assets/styles/test1.scss文件
写入样式内容：
安装sass
修改vite.config.ts配置文件，配置引入scss
此时发现页面并未应用样式
然后创建src/assets/styles/test2.scss文件，并在 main.ts 入口文件引入
如果你的项目遇到了此类报错，或者其他莫名其妙的报错
可能是因为sass版本过高导致的。
卸载sass，试试安装版本低一些的sass。
本次示例使用的sass@1.32.6版本。
当在main.ts中引入后，发现在vite配置引入的scss样式应用成功。
可能是项目中引用scss文件时才会触发vite的scss配置，具体原理尚未搞清，在此给遇到此问题的新手一个解决参考。
在vite项目中，有时候我们需要全局引入css变量、scss变量，或者引入全局scss样式文件，vite提供了以下这种配置方式
这种写法没有任何问题，并且我已经在一些项目中实践过了，可有一次我创建新项目的时候却无效了，在浏览器上也没有看到任何相关的样式，但是在main.js中引入又是正常的
我先是排查写法和路径是否有问题，然后排查sass或者vite的版本是否有问题，排查几个小时下来发现都没有问题，纳闷不已，唯一能确定的是vite的问题
于是我就想，也许别人也碰到过这种问题，当我找遍各大博客网站都没答案后（一大堆妥协说直接在main.js引入就好的），我准备去Vite仓库提各Issue
当我尝试查一下有没有类似的Issue时，发现竟然有好几个类似的Issue，还是关闭状态，难道这个问题已经解决了？我一个一个点开看，终于在其中一个Issue中找到了答案
#issue5682
原来这不是一个bug，只有在main.js引入一个其他scss文件或者在.vue文件中使用<style lang="scss"><style>，并且里面有内容，则 scss.additionalData 配置的全局scss文件就可以正确引入了，还建议我们在 scss.additionalData 引入的文件最好只写scss变量，别写css变量，因为css变量是运行时属性
至此，这个问题算是圆满解决了
最近我开源了一个Vite+Vue3+NaiveUI+Pinia的轻量级后台管理模板，非常适用于中小型项目或者个人项目，感兴趣的可以看下，欢迎参与开源、star、fork
文章：
Vite+Vue3+NaiveUI+Pinia搭建一套优雅的后台管理模板，真香 - 掘金 (juejin.cn)
预览：
template.qszone.com
源码：
github:(https://github.com/zclzone/vue-naive-admin)
gitee:(https://gitee.com/zclzone/vue-naive-admin)
