自定义vant中的样式

自定义vant中的样式

如果你需要的样式与vant展示的不同，这时我们可以自定义

定制方法

1. 在main.js文件中引入less文件（less文件一定要放在css文件的下面）

import Vant from 'vant'
import 'vant/lib/index.css'
// 注意less文件一定放在css文件的下面，样式才可以生效
import 'vant/lib/index.less'

2. 修改样式变量
   vue.config.js 中进行配置

const path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 引入修改样式的文件
            hack: `true; @import "${path.resolve(__dirname, 'src/styles/vantCss.less')}";`
          }
        }
      }
    }
  }
}

修改样式的文件，在路径为src/styles/vantCss.less的文件中写入想要修改的vant样式
例如：NavBar 导航栏的背景颜色和标题样式进行设置

@nav-bar-background-color:#3296FA;
@nav-bar-title-text-color:#fff;

其中变量的名称在每个组件介绍页的最下面