Gatsby+Ant Design白标平台运行时动态修改Less变量问题咨询

我们正在基于React、GatsbyJs和Ant Design搭建白标平台，受现有系统迁移约束无法更换技术栈，且要求仅支持单次部署，不可为不同白标单独构建版本，因此需要实现运行时动态调整样式（以颜色为主）。

当前遇到的核心问题是：Ant Design依赖Less变量定义主题，我们无法在运行时修改这些变量，即使用Less自带的modifyVars方法也无效。我们必须直接修改Less变量，不能通过全局CSS覆盖或其他方式实现——因为Ant Design会基于主变量衍生出大量关联属性，比如设置@primary-color为红色后，按钮的边框色、hover态颜色等都会自动生成不同深浅的红色，若改用其他样式方案需要自行生成衍生色并逐个替换组件属性，工作量极大。

现有配置场景 #

我们当前使用gatsby-plugin-antd和gatsby-plugin-less在构建时加载Less并修改变量，gatsby-config.js配置如下：

module.exports = {
  siteMetadata: {
    siteUrl: 'https://www.yourdomain.tld',
    title: 'yourtitle'
  },
  plugins: [
    'gatsby-plugin-root-import',
    'gatsby-plugin-typescript',
    {
      resolve: 'gatsby-plugin-antd',
      options: {
        style: true
      }
    },
    {
      resolve: 'gatsby-plugin-less',
      options: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            'primary-color': '#FFFFFF',
            'link-color': '#000000',
            'success-color': '#FFFFFF',
            'warning-color': '#000000'
          }
        }
      }
    }
  ]
};

我们在gatsby-browser.js文件中导入样式：

import './src/styles/index';

styles/index文件内容如下：

import 'tachyons';
import './global.css';
import './antd.less';

antd.less内容如下：

@import '~antd/dist/antd.less';

global.css为项目通用样式，当前构建时指定的变量可以正常生效。

已尝试的解决方案 #

• 尝试使用antd-theme-webpack-plugin，未找到Gatsby适配示例，参照Gatsby官方自定义Webpack配置教程通过gatsby-node.js添加该插件，设置indexFileName为index.html不生效；设置为false并在pages/index.tsx通过Helmet引入如下脚本会出现内存溢出：

<script> window.less = { async: false, env: 'production' }; 
</script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

• 保留indexFileName为'index.html'并引入脚本后，调用window.less.modifyVars返回成功但未变更Ant Design样式。
• 将Less作为node_module安装后直接引入调用modifyVars，结果同上。
• 移除相关Gatsby插件，按照Ant Design官方自定义主题教程直接导入Less文件：

@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less';
@import 'your-theme-file.less';

修改保存后样式可热更新，但modifyVars仍不生效。

• 测试修改基础HTML按钮样式也失败，推测问题出在Gatsby与Less的适配层面，gatsby的less-loader构建时使用的Less实例与运行时调用modifyVars的实例不一致，导致变量修改不生效。

优先推荐使用Ant Design官方推出的CSS变量动态主题方案，无需依赖运行时Less编译，也不会出现实例不一致的问题，适配Gatsby场景步骤如下：

1. 升级Ant Design版本到支持CSS变量的稳定版本
2. 修改gatsby-config.js中gatsby-plugin-less的配置，新增开启CSS变量的配置项：

{
  resolve: 'gatsby-plugin-less',
  options: {
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        'primary-color': '#FFFFFF',
        'link-color': '#000000',
        'success-color': '#FFFFFF',
        'warning-color': '#000000',
        'root-entry-name': 'variable'
      }
    }
  }
}

3. 替换原有antd.less的导入内容：

@import '~antd/dist/antd.variable.min.css';

4. 运行时修改主题直接操作body的CSS变量即可，所有关联衍生色会自动同步更新：

document.body.style.setProperty('--ant-primary-color', '#1890ff');

如果必须保留原有Less编译模式，可通过自定义Gatsby的Webpack配置，将Ant Design的Less文件排除在构建时编译范围外，改为在前端运行时加载完整Less文件并调用modifyVars，注意要匹配less-loader和运行时引入的Less.js版本，避免版本差异导致的编译异常。

内容的提问来源于stack exchange，提问作者SVV