Vant主题定制如何修改颜色样式
目录
- Vant主题定制修改颜色
- 使用场景
- 第一种:完全替换主题色或其他样式
- 第二种:直接覆盖样式
- Vant自定义主题颜色
- 先看效果图
- 步骤方法
Vant主题定制修改颜色
使用场景
需要修改vant组件的颜色或其他的样式时,可以用以下方法进行自定义修改。
文章图片
一个简单的效果:
文章图片
第一种:完全替换主题色或其他样式
用Vant官方提供的方法进行定制:
1.main.js引入样式原文件
// 引入全部样式import 'vant/lib/index.less'; // 引入单个组件样式import 'vant/lib/button/style/less';
2.创建less文件
文章图片
3.修改配置
用vue-cli搭建的可以直接在vue.config.js中更改配置:
const path = require("path"); //less文件的路径const myTheme = path.resolve(__dirname, "./src/assets/less/vantChange.less"); module.exports = {css: {loaderOptions: {less: {modifyVars: {hack: `true; @import "${myTheme}"; `}},}},}
4.修改样式
参考官网提供的样式变量
文章图片
文章图片
第二种:直接覆盖样式
1.找到class类名
在控制台选中元素,获取class类名,双击选中复制
文章图片
2.修改样式
.van-sidebar-item--select::before{background-color:#CCCCFF; }.van-sidebar-item--select, .van-sidebar-item--select:active{background-color:#FFCCCC; color:white; }
Vant自定义主题颜色
先看效果图
修改前:
文章图片
修改后
// less文件代码 @white: #000;
文章图片
步骤方法
1、 在main.js 中引入
import 'vant/lib/index.less';
2、新建less 文件,用来覆盖修改 框架里的颜色
文章图片
3、安装less和 less-loader, less-loader徐、需安装5.0.0版本
npm install less --save-devnpm install less less-loader@5.0.0 --save-dev
4、在vue.config.js 文件中添加以代码
// 需要放在module.exports对象里chainWebpack: config => {const types = ['vue-modules', 'vue', 'normal-modules', 'normal']types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))},// 此函数为方法体,需放在对象的外面function addStyleResource(rule) {rule.use('style-resource').loader('style-resources-loader').options({patterns: [path.resolve(__dirname, './src/assets/less/vant.less'), // 需要全局导入的less],})}
完整的代码为:
function addStyleResource(rule) {rule.use('style-resource').loader('style-resources-loader').options({patterns: [path.resolve(__dirname, './src/assets/less/vant.less'), // 需要全局导入的less],}) }module.exports = {css: {extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。sourceMap: false,loaderOptions: {// less加载器less: {javascriptEnabled: true,modifyVars: {// 直接覆盖变量// 'text-color': 'red',// 或者可以通过 less 文件覆盖(文件路径为绝对路径)'hack': `true; @import "${resolve('./src/assets/less/vant.less')}"; `}},scss: {// 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders// prependData: `//@import "assets/css/mixin.scss"; //@import "assets/css/variables.scss"; //$cdn: "${defaultSettings.$cdn}"; //`}}},// 对象参数chainWebpack: config => {const types = ['vue-modules', 'vue', 'normal-modules', 'normal']types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))}}
【Vant主题定制如何修改颜色样式】以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
- Vant|Vant 如何修改van-collapse-item右侧图标
- Android 主题theme说明 摘记
- JMS主题测试计划
- 个性化应用Win10主题标题栏彩色改成白色
- 使用Vant框架list组件遇到的坑及解决
- Android-风格和主题
- Android系统定制----删除系统锁屏功能
- Win8更改主题不换桌面图标的办法
- 魔幻宝石屋理财游戏app定制开发
- HTML5前端期末大作业(化妆品毕设主题——生物科技化妆品网页设计(6页) HTML+CSS+JavaScript...)