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

香柠汽水

于 2022-05-01 19:26:07 发布

阅读量2.6k

点赞数 1

文章标签： less vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_64609098/article/details/124531061

版权

本文详细记录了解决Vant框架在使用Less进行按需加载和定制主题时，modifyVars方法失效的过程。经过一步步排查，包括按需引入math.js组件，创建babel.config.js并安装必要的依赖，以及在vue.config.js中正确配置，最终成功实现了Less变量的替换，使得主题定制生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

第一步

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",
				},
			},
		},
	},
};

成功哈哈哈哈哈