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: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "${themePath}";`,
          },
        },
      },
    },
  },
})

• //webpack 在打包时，底层用到了node.js;所以可以导入并使用node的核心模块；
• // 通过 less 文件覆盖（文件路径为绝对路径）
  hack: true; @import "${themePath}";,
• 使用的是模版字符串，反引号 + ${变量名}