vue+vant2—篇3—定制主题色

step1：在main.js中引入样式源文件

//main.js

import 'vant/lib/index.less'// 切记：为了能够覆盖默认的 less 变量，这里一定要把后缀名改为 .less

 step2：创建theme.less，并在theme.less中修改主题色

//theme.less

@green: #ff6f4b;
@orange: #e6a23c;
@skeleton-row-background-color: #fff;

step3：修改样式变量，在vue.config.js中配置

使用 Less 提供的 ​​modifyVars​​ 即可对变量进行修改 

//vue.config.js
const { resolve } = require('path')
const themePath = resolve('src/assets/css/theme.less')

module.exports = {
 
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        // lessOptions: {
        modifyVars: {
          // 直接覆盖变量
          // 'text-color': '#111',
          // 'border-color': '#eee',
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${themePath}";`
        },
        // },
      },


    },
  },
}