vant组件库主题定制

vant组件库主题定制

使用vant组件库时，想要修改组件的样式；

一般是通过查找元素，找到类名加/deep/进行更改；
/deep/

缺点：只在本组件中生效，不能实现样式的复用；

为了实现样式的复用。可以使用vant组件的主题定制；

vant主题定制

• 1、引入样式main.js

手动引入样式
// 引入全部样式
import 'vant/lib/index.less';

// 引入单个组件样式
import 'vant/lib/button/style/less';

• 2、如果 vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。

// vue.config.js

const { defineConfig } = require('@vue/cli-service');
//webpack 在打包时，底层用到了node.js;所以可以导入并使用node的核心模块；
const path = require('path');
const themePath = path.join(__dirname,''./src/assets/less/theme.less'');
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loader