less.modifyVars的使用-改变主题颜色

less.modifyVars的使用-改变主题颜色

注：关于less的引入、语法等，请自行官网学习http://lesscss.cn/#getting-started。本文是针对vue项目（已经安装less依赖的），less.modifyVars的使用。
为了方便需要者阅读，我把控制都放在vue文件中，感兴趣的可以自己封装方法。

vue.config.js的配置

注：不需要初始化主题颜色的可跳过此步
在vue.config.js 文件 css的配置中加入loaderOptions的配置项，配置如下（其他的配置我都去掉了，影响阅读）

module.exports = {
    css: {
        // css预设器配置项
        loaderOptions: {
            less: {
                // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
                modifyVars: {
                    // 初始化可直接覆盖变量
                    'primary-color': '#1890FF',
                    'text-color': '#111',
                    'border-color': '#eee',
                    'nice-blue': '#f0f'
                },
                javascriptEnabled: true
            },
        }
    }
}

全局less的创建

注：我是在public文件夹中创建的
color.less

less代码：

@primary-color: #1890ff;
.primarybg{
  background: @primary-color;
}

vue引入less

<template>
	<div class="primarybg">123</div>
</template>


js代码：
created() {
    // Don't compile less in production!
    /* if (process.env.NODE_ENV === 'production') {
      return;
    } */
    // Determine if the component is remounted
    function buildIt() {
      // 正确的判定less是否已经加载less.modifyVars可用
      if (!window.less || !window.less.modifyVars) {
        return;
      }
      // less.modifyVars可用
      window.less.modifyVars({
          '@primary-color': '#eee'
        })
        .then((res) => {
            console.log(res)
        })
        .catch((res) => {
            console.log(res)
        });
    }
    // insert less.js and color.less
    const lessStyleNode = document.createElement('link');
    const lessConfigNode = document.createElement('script');
    const lessScriptNode = document.createElement('script');
    lessStyleNode.setAttribute('rel', 'stylesheet/less');
    lessStyleNode.setAttribute('href', __webpack_public_path__ + 'color.less')
    lessConfigNode.innerHTML = `
      window.less = {
        async: true,
        env: 'production',
        javascriptEnabled: true
      };
    `;
    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
    lessScriptNode.async = true;
    lessScriptNode.onload = () => {
      buildIt();
      lessScriptNode.onload = null;
      return true
    };
    document.body.appendChild(lessStyleNode);
    document.body.appendChild(lessConfigNode);
    document.body.appendChild(lessScriptNode);
  },
//大致解释下吧，我是在created周期创建script标签，异步引入color.less样式，因此修改主题颜色需要在加载完less即onload函数里执行，buildIt（）是封装的less.modifyVars方法。

效果图：

意见：这是很简单的less.modifyVars的使用实例，请格外注意less文件的创建及引入路径配置
结构很简陋，供大家参考。