vue + vite定义全局css

Vue.js 和 Vite 一起使用时，定义全局 CSS 可以通过以下几种方法实现：

1. **使用`vite.config.ts`配置全局CSS**: 在 `vite.config.ts` 文件中，可以设置 `build.css` 的路径为一个公共样式文件夹。例如：

   import { defineConfig } from 'vite';
   
   export default defineConfig({
     css: {
       buildOptions: {
         extract: false, // 不提取 CSS 到单独的文件
       },
       preload: true, // 将 CSS 注入到每个 HTML 页面预加载
     },
   });

然后在项目的根目录创建一个名为 `styles/global.css` 或其他自定义名称的文件来编写全局样式。

2. **使用`@/shared`或`@public`目录**: 创建一个`@/shared`或者`@public`目录，将全局CSS文件放入其中，Vite会自动将其作为全局资源处理。

3. **使用`<style lang="scss|sass">`标签**: 如果使用SCSS或Sass等预处理器，可以在项目中使用 `<style>` 标签，并指定 `lang` 属性为 "scss" 或者 "sass"，然后导入全局变量和主题。

<style lang="scss">
@import "@/styles/global.scss";
</style>