vant 定制主题

VANT 定制主体色

1. 在 babel.config.js 中配置按需引入样式源文件

module.exports = {
	presets: [
		'@vue/app'
	],
	plugins: [
		['import', {
			libraryName: 'vant',
			libraryDirectory: 'es',
			style: (name) => `${name}/style/less`,
		}, 'vant']
	]
}

2. 修改样式变量

// webpack.config.js

  css: {
    loaderOptions: {
      
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
             // 直接覆盖变量 
             'text-color': '#111',
             'border-color': '#eee',
             
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "@/assets/css/resetVant.less";`,
          },
        },
      },
    }
  }

3. 准备自己的reset文件，如我的是resetVant.less

// Color Palette
@blue: #2d68c1;

// NavBar
@nav-bar-height: 44px;
@nav-bar-background-color:@blue;
@nav-bar-arrow-size: 18px;
@nav-bar-icon-color: @white;
@nav-bar-text-color:  @white;
@nav-bar-title-text-color: @white;

4. 看效果 （可以把vant ui 原来的样式复制一份，对比修改，）

nav 的样式变了