博客

引入全局css

import ‘vant/lib/index.css’;

引入单个组件样式

import ‘vant/lib/toast/style/less’;

新建一个less文件，用于修改vant的less变量

如conver_vant.less,在里面修改变量

//toast
@toast-background-color:blue;

@action-sheet-max-height:80%!important;

在vue.config.js里按照官方提示配置

这里注意要使用绝对路径，并且@import 后面记得跟双引号””。

const path = require('path')
module.exports = {
    css:{
        loaderOptions:{
            less:{
                modifyVars:{
                    //通过本地less文件覆盖变量
                    // true; @import "your-less-file-path.less";
                    hack:`true;@import "${path.resolve(__dirname,'./src/common/cover_vant.less')}";`
                }
            }
        }
    }
}

修改完重新运行npm run serve才能看到效果。