🐛[BUG] 切换主题色为什么引用的样式没有使用CSS变量？

[tetap]

[tetap]

使用babel引入css变换倒是生效了，但是又引入了多份CSS，真的是吐血

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

在React项目中，我们可以使用CSS Modules来处理组件样式，从而避免全局样式产生的问题。同时，借助PostCSS和Webpack，我们可以使用CSS Variables定义全局变量并在组件中使用。

首先，确保你的项目中安装了postcss和postcss-preset-env插件，可以通过以下命令进行安装：

npm install postcss postcss-preset-env --save-dev

接着，在Webpack配置文件中加入以下代码：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // style-loader creates style nodes from JS strings
          'style-loader',
          // css-loader translates CSS into CommonJS
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
          // postcss-loader parses CSS and applies vendor prefixes to CSS rules
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['postcss-preset-env'],
              },
            },
          },
        ],
      },
    ],
  },
  // ...
};

这段代码会为项目添加支持CSS Modules和CSS Variables的规则，这样你就可以在React组件中使用CSS变量和模块化样式。例如：

:root {
  --primary-color: #1890ff;
}

.title {
  color: var(--primary-color);
}

如果你使用了antd组件库，那么也可以在less中使用CSS Variables，例如：

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

:root {
  --primary-color: #1890ff;
}

.ant-btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

以上代码演示了如何自定义antd组件库中的主题色。

如果你仍然遇到了问题，请提供具体的代码和报错信息，以便更好地解决问题。