登录
原创

vant-vue2自定义主题

发布于 2022-02-28 阅读 625
  • 前端
  • Vue.js
  • Vant
原创

在vant开发指南中,查阅 “定制主题” 模块。查看自定义主题方法:
https://youzan.github.io/vant/v2/#/zh-CN/theme

Vue 2 项目,安装 Vant 2:

npm i vant@latest-v2 -S

vue2中使用vant自定义主题参考步骤:

(1)# Vue 2 项目,安装 Vant 2:npm i vant@latest-v2 -S
(2)‘main.js’ 文件中 引入 vant 样式:import ‘vant/lib/index.less’;
(3) 在src文件下创建一个 文件存放 主题样式,例如:‘theme.less’
(4) 在开发页面使用调试工具找到 要改样式的元素 的类名,在vant文档中找到组件 中该元素的 样式变量,在 ‘theme.less’ 中 定义该样式变量,值设置为自己所需的
image.png
‘theme.less’:

@blue: #007bff;

@nav-bar-background-color: @blue;
@nav-bar-title-text-color: #fff;

(5) 在项目根目录下创建 ‘vue.config.js’ 文件,添加如下配置:

const path = require('path')
const themePath =  path.join(__dirname, './src/theme.less')

module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 或者可以通过 less 文件覆盖(文件路径为绝对路径)
          hack: `true; @import "${themePath}";`,
        },
      },
    },
  },
};

注意:配置 ‘vue.config.js’ 文件时,需要查看 自己的 less-loader 版本,如果版本低于 6.0,删除 lessOptions 这一级:

image.png

评论区

零00
7粉丝

时光荏苒,我自清欢

0

0

1

举报