vant步骤条自定义样式,vant按需引入没样式
这篇文章主要介绍了栈主题定制如何修改颜色样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
万特主题定制修改颜色使用场景第一种：完全替换主题色或其他样式第二种：直接覆盖样式栈自定义主题颜色先看效果图步骤方法
Vant主题定制修改颜色
使用场景
需要修改栈组件的颜色或其他的样式时，可以用以下方法进行自定义修改。
一个简单的效果：
第一种：完全替换主题色或其他样式
用栈官方提供的方法进行定制：
主页. js引入样式原文件
//引入全部样式
导入" vant/lib/index。少”；
//引入单个组件样式
导入”vant/lib/button/style/less”；
2.创建较少的文件
3.修改配置
用脚手架搭建的可以直接在vue。配置。射流研究…中更改配置：
const path=require( path )；
//更少文件的路径
const myTheme=path。resolve(_ _ dirname， ./src/assets/less/vant change。少’)；
模块。导出={
css: {
loaderOptions: {
减：{
修改版本：{
黑客：`真的；@ import $ { myTheme }
}
},
}
},
}
4.修改样式
参考官网提供的样式变量
第二种：直接覆盖样式
1.找到班级类名
在控制台选中元素，获取班级类名，双击选中复制
2.修改样式
style lang=less 范围。货车-侧栏-项目-选择：之前{
背景色：# CCCCFF
}。侧边栏项目选择货车-侧栏-项目-选择：活动{
背景色：# FFCCCC
颜色：白色；
}
/风格
Vant自定义主题颜色
先看效果图
修改前：
修改后
//更少文件代码@ white:# 000；
步骤方法
1、 在主页。射流研究…中引入
导入" vant/lib/index。少”；
2、新建较少的文件，用来覆盖修改框架里的颜色
3、安装较少的和少装者，少装者徐、需安装5.0.0版本
新公共管理安装较少-保存-开发
NPM装少装@ 5。0 .0-保存-开发
4、在vue。配置。射流研究…文件中添加以代码
//需要放在模块。导出对象里
chainWebpack: config={
常量类型=[ vue-模块， vue ，正常-模块，正常]
类型。foreach(type=addStyleResource(config。模块。规则( less ).（类型)之一)
},
//此函数为方法体，需放在对象的外面
函数addStyleResource(规则){
rule.use("样式-资源")。加载程序("样式-资源-加载程序")。选项({
模式：[
path.resolve(__dirname， ./src/assets/less/vant.less )，//需要全局导入的较少的
],
})
}
完整的代码为：
函数addStyleResource(规则){
rule.use("样式-资源")。加载程序("样式-资源-加载程序")。选项({
模式：[
path.resolve(__dirname， ./src/assets/less/vant.less )，//需要全局导入的较少的
],
})
}
模块。导出={
css: {
extract: IS_PROD，//是否将组件中的半铸钢钢性铸铁(铸造半钢)提取至一个独立的半铸钢钢性铸铁(铸造半钢)文件中（而不是动态注入到Java脚本语言中的在一条直线上的代码)。
源地图：假的，
loaderOptions: {
//更少加载器
减：{
javascriptEnabled: true，
修改版本：{
//直接覆盖变量
//text-color: red ，
//或者可以通过较少的文件覆盖（文件路径为绝对路径)
《黑客》:“真；@ import“$ { resolve(./src/assets/less/vant。less“)}”；`
}
},
scss: {
//向全局厚颜无耻样式传入共享的全局变量，$src可以配置图片内容交付网络前缀
//详情：https://CLI。vue js。org/guide/CSS。html #将选项传递给预处理器加载程序
//前置数据：` 1
//@ import assets/CSS/mixin。scss’；
//@ import assets/CSS/variables。scss’；
//$ cdn:“$ {默认设置”.$ cdn } "；
//`
}
}
},
//对象参数
chainWebpack: config={
常量类型=[ vue-模块， vue ，正常-模块，正常]
types . foreach(type=addStyleResource(config . module . rule( less )。(类型)之一)
}
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。