scss变量自动导入

 一、背景

我们平时项目开发的时候，会有如下应用场景，scss变量自动引入，来方便我们直接使用

二、方法

1.定义scss变量文件 var.scss

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

2.修改vite.config.js 

css: {
    preprocessorOptions: {
      scss: {
        // 自动导入scss文件
        additionalData: `
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}