umi + antd 动态主题色（二）

作者: 林ze宏 | 来源:发表于2021-08-22 15:42 被阅读0次

本文主要是基于 umi + antd 动态主题色优化升级。

效果如下：

动态主题.gif

GitHub 源码：umi-antd-dynamic-theme master 分支

上一篇文章，动态主题色是有一些问题的，主要体现在：

1：开发人员根据流程操作配置，需要更改变化 4 个地方，xxx.less，xxx.theme.less，public/styles/components.less 和 config/path.config.ts，比较繁琐。
2：编译之后，会产生多个 less 文件，请求几十个 less 文件，会有一定的性能影响；
3：每个 xxx.theme.less 文件都需要在头部引入对应的主题色变量；
4：首次请求 less.min.js 库会两次渲染执行 less.refresh（看源码可知），其中一次执行 less.refresh，没有传 modifyVars 变量，导致有时候主题色无效问题。

接下来分别对上面几个问题进行优化解决：

问题一

1：开发人员根据流程操作配置，需要更改变化 4 个地方，xxx.less，xxx.theme.less，public/styles/components.less 和 config/path.config.ts，比较繁琐

针对 xxx.less 样式文件，拆分出来 xxx.theme.less主题色样式文件，我觉得是必须的，如果不拆分的话，其实也是可以的，但是，会导致一个问题，就是除了主题色之外的所有样式文件都会被编译，会有一定的性能，其实也是不必要的。

针对 public/styles/components.less 和 config/path.config.ts 的手动配置，这个是可以通过脚本自动完成，没有必要每个人都是手动配置，这是可以优化的地方，但是，还可以继续优化，就是根本就可以不用这两个文件配置了，看如下问题2。

问题二

2：编译之后，会产生多个 less 文件，请求几十个 less 文件，会有一定的性能影响

编译之后，会产生多个 less 文件，如下图所示：

请求less

要解决这个问题，思路就是将生成的所有 less 文件，全部统一打包为一个自定义的 less 文件，所以，编写了如下脚本，去扫描项目中所有的 xxx.theme.less文件。

新建 scripts/theme/themeScripts.js 文件，脚本如下：

// 主题色脚本

const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const { promisify } = require('util');
const themeVars = require('./../../config/theme');

const glob = promisify(require('glob'));
const root = './';
const customPath = './public/styles/custom.theme.less';

Main();

async function Main() {
  init();
  start();
}

function init() {
  // 清空
  fs.writeFileSync(customPath, '', 'utf8');

  // 主题色变量初始值，跟 src/utils/index.ts 中 less.modifyVars 定义的变量相对应。
  for(let key in themeVars) {
    fs.appendFileSync(customPath, `${key}: ${themeVars[key]};\n`, 'utf8');
  }
}

async function start() {
  const rootPath = path.resolve(root);
  const fileList = await glob('src/**/*.theme.less', { cwd: rootPath, ignore: ['node_modules/**', 'src/.umi/**', 'src/.umi-production/**'] });

  // global.theme.less 在最前面，优先级最低
  const otherList = [];
  const globalFile = fileList.filter(file => {
    if (file.indexOf('global.theme.less') > -1) {
      return true;
    }
    otherList.push(file);
    return false;
  });

  globalFile.concat(otherList).forEach((filePath) => {
    writeFile(rootPath, filePath);
  });

  console.info(chalk.greenBright('恭喜您, 主题文件扫描完成！！！')); // eslint-disable-line
}

// 写文件
function writeFile(rootPath, filePath) {
  const bufferContent = fs.readFileSync(path.resolve(rootPath, filePath));
  const content = bufferContent.toString('utf8');
  fs.appendFileSync(customPath, `\n// ${filePath}\n${content}`, 'utf8');
}

module.exports = Main;

该脚本其实把问题一、问题二、问题三都解决了，对该脚本说明如下：

1 node 使用的是 CommonJS 服务器端 js 模块化的规范，所以对模块化导入导出需要使用 module.exports，主题色变量直接使用了项目初始化配置的 config/theme.ts 变量，所以，需要把文件从 ts 改为 js，同时 config/theme.ts 的导出需要改为 module.exports 导出，如下图：

2 脚本处理把 global.theme.less 主题色写在最前面，优先级最低，页面可以覆盖全局样式；
3 扫描所有的xxx.theme.less，写入自定义的 less 文件：public/styles/custom.theme.less;
4 需要在上一篇文章说的 public/styles/components.less文件引入custom.theme.less，如下图：

问题三

3：每个 xxx.theme.less 文件都需要在头部引入对应的主题色变量；

自定义的变量和主题色变量都在 config/theme.js 中定义，同时，通过上面的脚本，已经读取 config/theme.js 中所有定义的变量，写入了 custom.theme.less 文件的头部，所以，页面的 xxx.theme.less 文件就不需要再引入对应的主题色变量。

问题四

4：首次请求 less.min.js 库会两次渲染执行 less.refresh（看源码可知），其中一次执行 less.refresh，没有传 modifyVars 变量，导致有时候主题色无效问题

问题四是实际项目出现的问题，该问题是偶现的，有时候会出现主题色改变成功了，然后又失效了，网络慢的时候特别明显，也是很致命的一个问题，有些人会出现该问题，有些人不会。

查看 less.js 的源码，发现 less 会在页面加载完成时，调用 less.refresh 方法刷新，而该方法没有传 modifyVars 相关的变量，如下：

而在我们自定义的触发 less.modifyVars 方法是需要有主题色相关的变量，源码如下：

页面触发 less.modifyVars，跟 less.pageLoadFinished 的触发是随机，没有顺序的，才导致以上偶现的问题，解决方法就是把 less.pageLoadFinished 注释掉。

配置步骤

1：把 config/theme.ts 改 config/theme.js，把导出 export default 改为 module.exports
2：删除 config/path.config.ts 文件，同时，删除 config/config.ts 对该文件的引用
3：新建 public/styles/custom.theme.less 文件
4：把 public/styles/components.less 中的内容，更改为：

@import "./antd.theme.less";
@import "./custom.theme.less";

5：新建 scripts/theme/themeScripts.js 文件，编写如下脚本：

// 主题色脚本

const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const { promisify } = require('util');
const themeVars = require('./../../config/theme');

const glob = promisify(require('glob'));
const root = './';
const customPath = './public/styles/custom.theme.less';

Main();

async function Main() {
  init();
  start();
}

function init() {
  // 清空
  fs.writeFileSync(customPath, '', 'utf8');

  // 主题色变量初始值，跟 src/utils/index.ts 中 less.modifyVars 定义的变量相对应。
  for(let key in themeVars) {
    fs.appendFileSync(customPath, `${key}: ${themeVars[key]};\n`, 'utf8');
  }
}

async function start() {
  const rootPath = path.resolve(root);
  const fileList = await glob('src/**/*.theme.less', { cwd: rootPath, ignore: ['node_modules/**', 'src/.umi/**', 'src/.umi-production/**'] });

  // global.theme.less 在最前面，优先级最低
  const otherList = [];
  const globalFile = fileList.filter(file => {
    if (file.indexOf('global.theme.less') > -1) {
      return true;
    }
    otherList.push(file);
    return false;
  });

  globalFile.concat(otherList).forEach((filePath) => {
    writeFile(rootPath, filePath);
  });

  console.info(chalk.greenBright('恭喜您, 主题文件扫描完成！！！')); // eslint-disable-line
}

// 写文件
function writeFile(rootPath, filePath) {
  const bufferContent = fs.readFileSync(path.resolve(rootPath, filePath));
  const content = bufferContent.toString('utf8');
  fs.appendFileSync(customPath, `\n// ${filePath}\n${content}`, 'utf8');
}

module.exports = Main;

6：引入更改源码后的 less.min.js 库（less.4x.min.js），具体在本人 GitHub 代码库下载；
7：更改优化后的 utils 主题色方法，如下：

function _changeTheme(themeColor: string) {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  if (!(window as any).less) return;

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  (window as any).less.modifyVars({
    '@primary-color': themeColor,
    '@header-bar-visible': 'visible',
  });
}

let lessNodesAppended: boolean = false;

/**
 * 动态更改主题色
 * @param {string} themeColor 主题颜色
 */
export function onChangeTheme(themeColor: string) {
  if (!lessNodesAppended) {
    // 插入 less.js，和 颜色主题.less
    const lessConfigNode = document.createElement('script');
    const lessScriptNode = document.createElement('script');
    const lessStyleNode = document.createElement('link');
    lessStyleNode.setAttribute('rel', 'stylesheet/less');
    lessStyleNode.setAttribute('href', '/styles/components.less'); // public 目标下

    // https://lesscss.org/usage/#api
    // env: 'production' development
    lessConfigNode.innerHTML = `
        window.less = {
          env: 'production',
          async: true,
          javascriptEnabled: true
        };
        `;
    lessScriptNode.src = '/less.4x.min.js';
    lessScriptNode.async = true;
    lessScriptNode.onload = () => {
      _changeTheme(themeColor);
      lessScriptNode.onload = null;
    };
    document.body.appendChild(lessStyleNode);
    document.body.appendChild(lessConfigNode);
    document.body.appendChild(lessScriptNode);
    lessNodesAppended = true;
  } else {
    _changeTheme(themeColor);
  }
}

8：在 package.json 的 scripts 引入执行主题色脚本，同时，在 start 和 build 之前，每次自动执行扫描主题色，如下：

"scripts": {
  "start": "npm run theme && umi dev",
  "build": "npm run theme && umi build",
  "theme": "node scripts/theme/themeScripts.js",
},

9：安装脚本需要的库，glob 和 chalk：

npm i glob -S
npm i chalk -S

-10：注意自定义文件 xxx.theme.less 使用 css 写法，而不是采用 @prefix 前缀变量写法，因为 @prefix 写法有时候会失效，正常样式写法示例如下：

.c-list-more{
  color: @primary-color;
}
.c-list-more:hover{
  color: @primary-color;
}
.c-list-item .title::before{
  background-color: @primary-color;
}
.c-list-item .title:hover{
  color: lighten(@primary-color, 15%);
}
.c-list-item .desc{
  color:  @primary-color;
}

开发人员主题色 less 样式编写

通过如上配置，开发人员只需要编写 xxx.theme.less 即可，不再需要编写其他配置文件。

umi + antd 动态主题色（二）

问题一

问题二

问题三

问题四

配置步骤

开发人员主题色 less 样式编写

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读