Less变量动态修改

引入less文件

需要将less.js和需要动态改变变量的的less文件复制到public目录下。在index.html文件中引入

<link rel="stylesheet/less" href="<%= BASE_URL %>ant-form.less">
<script src="<%= BASE_URL %>less.min.js"></script>

需要注意的是stylesheet/less不能省略。否则less.js中的文件类型判断会将less文件忽略

动态改变less变量

created() {
   this.changeLessVar()
}
changeLessVar() {
     // 正确的判定less是否已经加载less.modifyVars可用
     if (!window.less || !window.less.modifyVars) {
       return
     }
     const lessVars = {}
     //this.config.lessFields为自己业务的less变量定义
     if (this.config.lessFields && this.config.lessFields.length > 0) {
       this.config.lessFields.forEach(item => {
         lessVars[item.lessVar] = item.lessValue
       })
     }
     if (this.config.labelWidth) {
       lessVars['@minWidth'] = this.config.labelWidth
     }
     // less.modifyVars可用
     window.less.modifyVars(lessVars).then(() => {
       console.log('less变量设置成功')
     }).catch(() => {
       console.log('less变量设置失败')
     })
   }