[JavaScript知识库]vant 定制主题改变NavBar 导航栏 背景颜色和字体颜色的三种方法

例如 vue-cli 搭建的项目 给NavBar 导航栏 设置个蓝底白字
第一种直接在组件内
好处简单,只是其他组件需要使用还需要再复制代码,代码重复

<template>
  <div class="login-container">
   <van-nav-bar title="登录">
      <template #left>     //#left 具名插槽
        <img class="logo" src="@/assets/images/logo.png"/>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

<style scoped lang='less'>
.logo {
    width: 100px;
    height: 30px;
}
.van-nav-bar{
   background: #blue;  
    // 因为style标签上有 lang='less'  所以.van-nav-bar__title 可以嵌套到.van-nav-bar里面
   /* /deep/ 就是把data-v-hash值选择器写到类名的前面 */
    /deep/ .van-nav-bar__title{
    color: white;
    }
}

第二种:
a:第一步

按需引入样式（推荐）
在 babel.config.js 中配置按需引入样式源文件，注意 babel6 不支持按需引入样式，请手动引入样式。

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ],
};

b:第二步
在vue.config.js复制以下代码,没有就创建一个,记得是和src同级目录下

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        // 去postcss.config.js 中去看你的less-loader 版本 我的版本是 "less-loader": "^5.0.0",所以要删除lessOptions: {
        // lessOptions: {
        modifyVars: {
          // 直接覆盖变量
          'nav-bar-title-text-color': '#fff',
          'nav-bar-background-color': 'blue'

        }
      }
    }
  }
  // }

效果没出来的话要重启下,先打断你的终端,再yarn serve
(src以外的文件修改后都要重启下服务器)

第三种
a:第一步

按需引入样式（推荐）
在 babel.config.js 中配置按需引入样式源文件，注意 babel6 不支持按需引入样式，请手动引入样式。

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ],
};

b:第二步
在vue.config.js复制以下代码,没有就创建一个,记得是和src同级目录下
再创建一个cover.less(文件名自己取,建议建在src/assets/style/cover.less)
cover.less文件代码,以后就可以把要改的样式都放这里

@nav-bar-background-color:blue;
@nav-bar-title-text-color:'#fff';

vue.config.js代码如下

// 重要步骤
const path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        // 去postcss.config.js 中去看你的less-loader 版本 我的版本是 "less-loader": "^5.0.0",所以要删除lessOptions: {
        // lessOptions: {
        modifyVars: {

          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${path.resolve(__dirname, 'src/assets/styles/cover.less')}";`
        }
      }
    }
  }
}