博客

vant 框架自定义主题的使用

• 
  Vant 使用了 Less 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。
  

1. 步骤一 引入样式源文件

• 定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。

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

  // main.js 中引入全部样式,改为 .less 文件
  import 'vant/lib/index.less';

2. 步骤二

• 在 src 根目录中创建自定义主题文件 theme.less

	// 覆盖 vant 官方的变量值
	@blue: #c88355;

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

3. 步骤三

• 在根目录创建 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: {
            // 第一种：直接覆盖变量
            //"nav-bar-background-color": "#ccc",
            // 第二种(推荐)：或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "${themePath}";`,
          },
        },
      },
    },
  },
};