vant 按需加载定制化主题 使用 Less 提供的 modifyVars 不生效

这个问题弄了一下午才解决 呜呜呜

第一步

npm i -D babel-plugin-import @vue/cli-plugin-babel

第二步

math.js 按需引入组件

import Vue from "vue";
import App from "./App";
import { Button, Toast, Cell, Popup, GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
Vue.use(Button)
	.use(Toast)
	.use(Cell)
	.use(Popup)
	.use(GoodsAction)
	.use(GoodsActionIcon)
	.use(GoodsActionButton);
new Vue({
	el: "#app",
	render: (h) => h(App),
});

第三步

根目录新建babel.config.js 一定要安装@vue/cli-plugin-babel 不安装这个解析不了会不生效

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: name => `${name}/style/less`
      },
      'vant'
    ]
  ]
};

第四步

vue.config.js 里面配置 就可以替换变量了

module.exports = {
	css: {
		loaderOptions: {
			less: {
				modifyVars: {
					"text-color": "red",
					"font-size-sm": "13px",
					"font-size-md": "15px",
					"font-size-lg": "17px",
					"goods-action-button-danger-color": "blue",
					"goods-action-button-warning-color": "red",
				},
			},
		},
	},
};

成功 哈哈哈哈哈