antd design react项目按需加载和修改主题颜色

创建新的React项目

1.安装 npm i -g create-react-app 安装完后 create-react-app --version 查看当前版本

2.创建项目 create-react-app 项目名

3.启动项目 npm start

安装antd

npm i antd -S

安装按需加入需要的包

npm i react-app-rewired customize-cra babel-plugin-import -D

修改package.json

"scripts": {
    "start": "sreact-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  改为
"scripts": {
    "start": "set PORT=3003&&react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

// set PORT=3003 设置端口

在根目录下创建一个config-overrides.js 文件

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

module.exports = override(
    //写了下面这个部分，就实现了按需加载，再也不需要再每个页面里面都引入“antd/dist/antd.css”啦
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: css//这里一定要写true，css和less都不行哦
    })
)

在app.js中添加import {Button} from ‘antd’

<Button type="primary">nihao </Button>

重新运行一下 npm start 按需加入就完成了 再也不需要再每一个页面里面都引入’antd/dist/antd.css’了

更换主题颜色

注意: 因为更换主题颜色是更改的less的变量 所以需要安装less less-loader
并且 less-loader的版本不要太高了 太高版本有些功能不支持 比如会出现this.getOptions is not a function 这时就要把less-loader的版本降低到5.0
less肯定也会因为版本太高 与less-loader的版本不匹配 出现
.bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options 错误 这时也要把less的版本降低

npm uninstall less-loader
npm i less-loader@5.0.0 -D

npm uninstall less
npm i less@^2.7.3

之前使用了antd design 官网上的更改主题色https://ant.design/docs/react/use-with-create-react-app-cn不起作用
后来在修改config-overrides.js为也还是不行

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

module.exports = override(
    //写了下面这个部分，就实现了按需加载，再也不需要再每个页面里面都引入“antd/dist/antd.css”啦
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true  //这里一定要写true，css和less都不行哦
    }),
    addLessLoader({
        javascriptEnabled: true,
        //下面这行很特殊，这里是更改主题的关键，这里我只更改了主色，当然还可以更改其他的，下面会详细写出。
        modifyVars: { "@primary-color": "#f47983" }
    })
)

最后看了customize-cra文档 重新修改为以下这样 主题颜色更改才成功了 为此还安装了css-loader 和style-loader

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

module.exports = override(
        strictMath: false,
        noIeCompat: true,
        //下面这行很特殊，这里是更改主题的关键，这里我只更改了主色，当然还可以更改其他的，下面会详细写出。
        modifyVars: { "@primary-color": "#f47983" },
        cssLoaderOptions: {}, // .less file used css-loader option, not all CSS file.
        cssModules: {
            localIdentName: "[path][name]__[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
        },
)