阅读 1254

在nuxt中使用vant,并支持定制主题

环境
vant:^2.2.10
nuxt:^2.7.1

缘由
官方推荐写法,如下图

按照上图配置,则会出现

在github上提的issues

官方回答:
你好,这个问题建议到 nuxt 仓库提问,因为这个问题本质上是由 nuxt 和 babel-plugin-import 两者不适配导致的,vant 这边无法提供出解决方案

解决的方案如下

步骤

1. npm install babel-plugin-import less less-loader path -D

2. 在plugins文件夹中新建vant.js,导入自己所需要的全局组件,例如:

 import Vue from "vue";
 import { Toast, Dialog } from 'vant';
 Vue.use(Toast);
 Vue.prototype.$toast = Toast;
 Vue.use(Dialog);
 Vue.prototype.$dialog = Dialog;
复制代码

3. 在nuxt.config.js配置plugins,引入vant

module.exports = {
  plugins: ['~/plugins/vant.js'] 
}
复制代码

4. 在nuxt.config.js配置babel

module.exports = {
 build: {
   // 添加这个是关键,添加后babel才会处理依赖包vant里面的代码
   transpile: [ /vant.*?less/ ], 
   babel: {
     plugins: [
       ['import', {
         libraryName: 'vant',
         "style": (name) => {
           return `${name}/style/less.js`
         }
       }, 'vant']
     ],
   },
 }
}
复制代码

5.定制主题

a.新建var.less,所有可用的颜色变量请参考

@tabs-bottom-bar-color: blue;
@tab-active-text-color: blue;
@tab-text-color:#646566;
复制代码

b.在nuxt.config.js

const path = require("path");
cosnt resolve = (dir) => path.join(__dirname, dir);
module.exports = {
  build: {
    extend(config) {
        config.module.rules.push({
        test: /\.less$/,
        use: [{
            loader: "less-loader",
            options: {
            modifyVars: {
                // 直接覆盖变量
                hack: `true; @import "${resolve(
                    "./assets/less/var.less"
                )}";`
            }
            }
        }]
        });
    },
  }
}
复制代码

文章参考
有问题可以发邮件 991368652@qq.com

关注下面的标签,发现更多相似文章
评论