情境：
使用了element-plus并按照官方加入了自定义主题的css.也有自己的全局变量globalstyle.scss文件。
需求：
想把globalstyle.scss文件中的代码可以每个vue文件中的<style>代码块访问到。
解决过程：
全局变量前：
globalstyle.scss的引入方式(在index.html中引入)
//index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><link rel="stylesheet" href="/src/assets/css/globalstyle.scss" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body></html>
改为全局变量后 ：
step1：
👇为修改后的vite.config.js 。
import {defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'// https://vitejs.dev/config/export default defineConfig({plugins: [vue()],resolve: {alias: {'~': path.resolve(__dirname, './'),'@': path.resolve(__dirname, 'src')}},css: {preprocessorOptions: {scss: {//additionalData: '@import"@/assets/css/globalstyle.scss";'//👆这样写是不行的。因为如果项目中其他的css文件有@forward关键字，就会提示错误additionalData: '@use "@/assets/css/globalstyle.scss" as *;'//👆这样写是可以的，但是要注意//!!!!一定要将其他地方引入该css文件的地方删除，如index.html,否则会提示已经加载该module的错误！！！}}}})
step2：
千万记得将上图index.html中的
<link rel="stylesheet" href="/src/assets/css/globalstyle.scss" />
👆这句话千万记得注释掉！！！！！
