nuxt定制vant主题

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

注意：less-loader版本为5.0.0

2、plugin/vant-ui.js

import Vue from 'vue'
import {Toast } from 'vant'
Vue.use(Toast)
// 将所有 Toast 的展示时长设置为 2000 毫秒
Toast.setDefaultOptions({ duration: 3000 });
Vue.prototype.$toast = Toast;

           

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

module.exports = {
  plugins: ['~/plugins/vant-ui.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.新建vantVar.less

@toast-border-radius:18px;
           

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: {
            javascriptEnabled: true, // 开启 Less 行内 JavaScript 支持
            modifyVars: {
                // 直接覆盖变量
                hack: `true; @import "${resolve(
                    "./assets/less/vantVar.less"
                )}";`
            }
            }
        }]
        });
    },
  }
}