注册 X
提交 注:点击提交后系统会发送邮件到邮箱验证!(仅支持中国大陆邮箱)
我已阅读并同意 服务条款
首页 > IT技术笔记 > 查看笔记

vant-定制主题

介绍

Vant 提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者其他样式,可以按照本文档进行主题定制。

示例工程

我们提供了一个基于 Vue Cli 3 的示例工程,仓库地址为

Vant Demo

,其中包含了定制主题的基本配置,可以作为参考。

样式变量

Vant 使用了

Less

对样式进行预处理,并内置了一些样式变量,通过替换样式变量即可定制你自己需要的主题。

下面是所有的基础样式变量,组件的颜色变量请参考各个组件的文档或

配置文件

        
        
      

定制方法

步骤一 引入样式源文件

定制主题时,需要引入组件对应的 Less 样式文件,支持按需引入和手动引入两种方式。

按需引入样式(推荐)

在 babel.config.js 中配置按需引入样式源文件,注意 babel6 不支持按需引入样式,请手动引入样式。

        
        
      

手动引入样式

        
        
      

步骤二 修改样式变量

使用 Less 提供的

modifyVars

即可对变量进行修改,下面是参考的 webpack 配置。

        
        
      

如果 vue-cli 搭建的项目,可以在 `vue.config.js` 中进行配置。

        
        
      


 打赏        分享



评论

邮箱: 昵称: