最近在用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文件
}
}
}
})