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}";`
},
// },
},
},
},
}