解决ant design主题颜色在cdn加载时丢失的问题

在使用CDN加载Ant Design组件时，自定义主题颜色失效是一个常见问题。这是因为Ant Design的Less样式无法被正确覆盖。

解决方案：

推荐使用less-loader来加载Ant Design，并通过配置全局变量来修改主题颜色。

针对不同版本的less-loader，配置方法略有不同：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

less-loader版本低于6.0.0：

// webpack.config.js
module: {
  rules: [
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            modifyVars: {
              'primary-color': '#1fb5ab', // 自定义主题颜色
            },
            javascriptEnabled: true,
          },
        },
      ],
    },
  ],
}

less-loader版本高于或等于6.0.0：

// webpack.config.js
module: {
  rules: [
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              modifyVars: {
                'primary-color': '#1fb5ab', // 自定义主题颜色
              },
            },
          },
        },
      ],
    },
  ],
}

通过lessOptions.modifyVars属性，您可以轻松覆盖Ant Design的默认主题颜色，实现自定义主题效果。 记得将#1fb5ab替换成您想要的颜色值。