在Vite中使用CSS的三种方式
对于CSS的使用在Vite中方便了许多，我们几乎不需要特别配置，Webpack还需要配置loader和babel，postcss等,Vite在这一方面几乎开箱即用，Vite会自动把.css文件导入到style标签中，并且内置了postcss，postcss-import常用的CSS优化插件，如果我们想要使用sass，less等这类CSS预处理，直接安装对应的依赖就行，无需安装特定的Vite插件。关于CSS在Vite项目中的应用方案有以下三种
1.CSS预处理器(Scss，Less)
目前项目中使用最多的还是这两种预处理器，在Vite中使用很简单,只需要 npm add -D sass或者npm add -D less，就可以直接在项目里使用了。这是因为Vite同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite插件，安装相应的预处理器依赖即可。
2.Tailwindcss
tailwindcss是postcss的一个插件，通过引入该插件，可以直接在HTML里面写样式。使用方式类似Bootstrap，提前定义好了通用的样式类名，也可以自己修改配置，比较灵活，但是刚开始上手可能会感觉比较别扭，习惯了后确实写起来比较快，也不需要CSS和HTML来回切换。并且除了基本的样式编写外，Tailwindcss也包含了黑白主题切换和响应式，和一些标准的页面布局的解决方案
3.原生CSS
Vite官方建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。这也是未来的一种趋势吧，因为现在原生CSS的功能已经满足了大部分的开发场景了，比如CSS的嵌套功能，变量。
总结
无论是哪一种都可以，用习惯了都可以。不过尽量避免多个混用，容易导致后期项目不好维护，而且也比较乱
