标签导航:

本地环境使用CDN引入Antd主题颜色重置怎么办?

本地环境下,通过cdn引入ant design时,主题颜色常常被重置。这通常是由于less-loader版本过高导致的兼容性问题。

解决方法是利用less-loader的modifyVars选项来自定义主题颜色。根据less-loader的版本,配置方式略有不同:

less-loader版本小于6.0.0:

{
  loader: 'less-loader',
  options: {
    modifyVars: {
      'primary-color': '#1fb5ab',
      'link-color': '#1fb5ab',
      'border-radius-base': '2px',
    },
    javascriptEnabled: true
  }
}

less-loader版本大于等于6.0.0:

{
  loader: 'less-loader',
  options: {
    lessOptions: {
      modifyVars: {
        'primary-color': '#1fb5ab',
        'link-color': '#1fb5ab',
        'border-radius-base': '2px',
      },
    },
    javascriptEnabled: true
  }
}

通过以上配置,您可以轻松覆盖Ant Design的默认主题颜色,并应用您自定义的主题。 请根据您的less-loader版本选择合适的配置方法。