react：config-overrides.js文件修改默认主题颜色不生效

Question

const { override, fixBabelImports ,addLessLoader} = require('customize-cra');
module.exports = override(
    // 针对antd实现按需打包：根据import来打包(babel-plugin-import插件)
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,//自动打包相关样式
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
    }),
);

Answer 1

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：react项目配置config-overrides.js
• 除此之外, 这篇博客: react-移动端项目中的 2.config-overrides.js 的创建-按需加载 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• const { override, fixBabelImports } = require('customize-cra');
  
  module.exports = function override(config, env) {
  	// do stuff with the webpack config...
  	return config;
  };
  module.exports = override(
  	fixBabelImports('import', {
  		libraryName: 'antd-mobile',
  		style: 'css',
  	})
  );
  

• 以下回答由chatgpt基于相关博客总结生成:

  针对您的问题，可能需要确认以下几点：

  1. 确认config-overrides.js文件是否被正确创建在正确的位置，并且未被其他文件覆盖。

  2. 确认您在config-overrides.js文件中修改的代码是否正确生效。这里提供两个示例：

  3. 示例1：修改antd主题颜色：

  安装antd：

  npm install antd --save
  

  在config-overrides.js文件中添加以下代码：

  const { override, fixBabelImports, addLessLoader } = require("customize-cra");
  module.exports = override(
    fixBabelImports("import", {
      libraryName: "antd",
      libraryDirectory: "es",
      style: true
    }),
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: { "@primary-color": "#1DA57A" }
    })
  );
  

  这里通过addLessLoader方法和modifyVars参数来更改antd主题的颜色。

  • 示例2：使用styled-components修改组件样式

  安装styled-components：

  npm install styled-components --save
  

  在config-overrides.js文件中添加以下代码：

  const { override } = require('customize-cra');
  const { injectGlobal } = require('styled-components')
  
  const injectResetCss = () => () => injectGlobal`
    /* 重置样式 */
    *{ margin: 0; padding: 0; }
  `;
  
  module.exports = override(
    injectResetCss()
  );
  

  这里通过injectGlobal方法来添加全局的css样式，以达到重置样式的效果。

  1. 确认您代码中没有其他覆盖修改config-overrides.js文件的操作，例如在其他文件中也修改了同样的配置。