react解决引入antd以后样式不生效问题，以及自定义样式主题

在react项目中引入antd依赖以后发现样式没有生效。可能是引入了按需打包依赖导致的。但是实际项目中确实需要按需打包。所以我们必须解决这个问题

# 安装antd
npm install antd
# 下载这些是为了按需打包用的
npm install react-app-rewired customize-cra babel-plugin-import

解决按需打包过程中样式不生效问题

方式一

最简单的方式是在项目入口js，即index.js文件中引入下面一句话，但是不推荐，因为这样是全局引入，比较重，故不推荐

import 'antd/dist/antd.css'

方式二

1. 在项目根目录下，也就是和src同级的目录下创建config-overrides.js文件，注意文件名一定要写对并且放对位置，我第一次就写成了config.overrides.js导致启动失败。因为接下来启动项目的时候会尝试加载这个文件。

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

//按需打包
module.exports = override(
    //根据项目中的【import】语句打包，也就是说项目import了谁就打包谁，比如我只import Button组件，就可以只打包Button相关样式
    //这里的import使用的是babel-plugin-import依赖，将前缀省略去了，这个依赖需要手动安装，然后会在package.json文件中有体现
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',//自动打包相关样式
    }),
);

2. 将package.json文件中如下内容

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

替换为

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

react-app-rewired命令会加载config-overrides.js文件来进行扩展配置。注意eject并没有换成react-scripts eject脚本。

上面就配置完了，重启项目会发现，antd的样式已经生效了。并且项目中的样式文件是按需引入的不会全部引入。

自定义antd主题/使用less样式文件

自定义antd主题颜色和使用less样式文件是一个意思。因为要自定义主题色就需要使项目识别less样式文件。react默认是不识别less文件的，如果不进行配置，直接使用less文件，其中的样式是不生效的。

我们在上一节的配置中配置了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'},
    }),
);

可能出现的错误

less版本过高可能会出现问题TypeError: this.getOptions is not a function，需要先卸载再重装：

# 卸载
npm uninstall less-loader
# 重装
npm install less-loader@5.0.0