博客

vant 如何定制主题，以NavBar 导航栏为例。

这里 vant 是使用全局引入的方式

第一步：手动引入样式

在 main.js 里引入，要把css 的后缀名改为 less

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入vant
import Vant from 'vant'
// 为了能够覆盖默认的 less 变量，这里要把css 的后缀名改为 less
import 'vant/lib/index.less'

Vue.use(Vant)
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

第二步，在src目录下新建一个 theme.less 文件

第三步： vue-cli 搭建的项目，在 vue.config.js(没有就在最外面新建) 中进行配置

// 这个文件是 vue-cli 创建出来的项目的配置文件
// 在 vue.config.js 这个配置文件中，可以对整个项目的打包，构建进行全局性的配置

// webpack 在进行打包的时候，底层用到了 node.js
// 因此，在 vue.config.js 配置文件中，可以导入并使用 node.js 中的核心模块
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 1、直接覆盖变量(一般不用，因为每次改之后，要重新运行)
            //'text-color': '#111',
            //'border-color': '#eee',
            // 2、这里通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "${themePath}";`,
          },
        },
      },
    },
  },
};

第四步：在第二步新建的 theme.less 文件中配置
下面是 NavBar 导航栏提供的 less 变量

// 在 theme.less 文件中，覆盖 Vant 官方的 less 变量值
@blue: red;

// 覆盖 Navbar 的 less 样式
@nav-bar-background-color: @blue;
@nav-bar-title-text-color: #ffffff;

注意像 @nav-bar-background-color 这些是不可以改变的，后面记得加分号’;’

大功告成