vite 配置sass全局变量

为了在Vite中配置全局的Sass变量，可以使用vite-plugin-style-resources和sass-resources-loader插件。下面是具体的步骤：

1.安装vite-plugin-style-resources和sass-resources-loader插件：

npm install vite-plugin-style-resources sass-resources-loader -D

2.在vite.config.js文件中配置插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import styleResources from 'vite-plugin-style-resources'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'element-plus',
        esModule: true,
        ensureStyleFile: true,
        resolveStyle: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`
        },
        resolveComponent: (name) => {
          return `element-plus/lib/${name}`
        },
      }]
    }),
    styleResources({
      patterns: [
        // 这里是你的全局变量文件路径，可以配置多个
        path.resolve(__dirname, './src/styles/variables.scss')
      ],
      preProcessor: 'scss'
    })
  ]
})

3.在你的全局变量文件中定义变量：

$primary-color: #1890ff;
$font-size: 14px;

4.在组件中使用全局变量：

// 引入全局变量
@import '~@/styles/variables.scss';

// 使用全局变量
.element {
  color: $primary-color;
  font-size: $font-size;
}