vue3 + Ts + vite + vant4 + Sass 制定vant4的全局主题色彩配置 或者定义全局样式

最近在用vue3+vite+vant4的时候，想要vant全局改变按钮或者字体颜色。或者单独定义全局的样式

一、首先引入sass

 npm install sass sass-loader -d

二、创建全局的scss文件添加全局样式

在assets中创建 vant.scss 的文件,可以看一下vant 的ConfigProvider 全局配置，里面有具体的颜色变量，可以添加使用 vant ConfigProvider全局颜色

//vant.scss
$color: red  //定义单独样式  -> 页面中可以直接去使用  $color
//定义vant的定制颜色
:root:root{
	--van-blue: #5677fc; //这个颜色就是配置全局的
}

三、Vite.config.ts 添加css配置

export default defineConfig({
	css: {
	    preprocessorOptions: {
	      scss: {
	        additionalData: `@import "./src/asstes/vant.scss";` // 此处全局的scss文件
	      }
	    }
	  }
})