如何从React项目中移除global.less及Antd自动导入的CSS？

一、关闭Antd自动导入CSS #

根据项目配置方式不同，分两种情况处理：

1. 使用Create React App + craco/customize-cra #

修改项目根目录的craco.config.js，通过babel-plugin-import禁用Antd的自动样式导入：

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: false, // 核心设置：停止自动导入Antd的CSS/LESS文件
  }),
);

2. 自定义Webpack配置的项目 #

在项目的Babel配置文件（如.babelrc或babel.config.js）中，配置babel-plugin-import时设置style: false：

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": false
    }]
  ]
}

同时检查项目入口文件（如index.js），删除类似import 'antd/dist/antd.css'的全局样式导入语句。

二、移除global.less #

• 直接找到项目中导入global.less的位置（通常是index.js、App.js或配置文件），删除对应的导入代码，比如：

  // 删除这行
  import './global.less';
  

• 若global.less是通过Webpack自动注入的，检查Webpack配置中的entry字段或相关插件，移除自动引入该文件的逻辑。

额外注意事项 #

• 关闭自动导入后，如需使用Antd单个组件的样式，可以手动导入对应组件的LESS文件，例如：

  import 'antd/es/table/style/index.less';
  

• 确保自定义全局CSS的优先级足够，可通过更具体的CSS选择器（如嵌套选择器、类名组合）覆盖Antd组件的默认样式，尽量避免滥用!important。

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