样式插件

由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。
话虽如此，但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

  1. npm add -D less
  2. npm add -D sass
  3. npm add -D stylus

@vitejs/plugin-legacy

为打包后的文件提供传统浏览器兼容性支持。因为 vite 是基于现代浏览器支持的 ESM 机制，所以构建后文件模块仍是 ESM，如果需要支持旧版浏览器就需要使用 @vitejs/plugin-legacy
安装及使用

  1. npm i -D @vitejs/plugin-legacy
  2. // vite.config.ts
  3. import { defineConfig } from 'vite'
  4. import legacy from '@vitejs/plugin-legacy'
  6. export default defineConfig({
  7.   plugins: [
  8.     legacy({
  9.       targets: ['defaults', 'not IE 11'],
  10.     }),
  11.   ],
  12. })