Antd 的按需引入+自定主题

迷途橘

2022 年 02 月 04 日

45 次浏览

暂无评论

1805字数

react

# 3.x

### 安装依赖

```c
// 根据具体需求选择包管理器

npm install react-app-rewired customize-cra babel-plugin-import less less-loader antd@3.26.19

yarn add react-app-rewired customize-cra babel-plugin-import less less-loader antd@3.26.19
```

### 修改 package.json

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

### 根目录下创建 ```config-overrides.js```

```js
// 配置具体的修改规则
// 引入依赖
const { override, fixBabelImports,addLessLoader} = require('customize-cra')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  addLessLoader({
    lessOptions:{
      javascriptEnabled: true,
      modifyVars: { '@primary-color': 'green' } // 主题颜色
    }
  })
)
```

### 备注

不用在组件里亲自引入样式了，即：```import 'antd/dist/antd.css'```应该删掉

# 4.x

3.x 种方法需要去暴露 ```React``` 中的配置文件，这种操作是不可返回的，一旦暴露就不可回收。

在 ```antd``` 最新版中，引入了 ```craco``` 库，我们可以使用 ```craco``` 来实现自定义的效果

### 安装依赖

```language
yarn add @craco/craco craco-less less less-loader
```

### 修改 ```package.json```

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

### 根目录下创建 ```craco.config.js```

```js
const CracoLessPlugin = require('craco-less')

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true
          }
        }
      }
    }
  ]
}
```

### 在根文件顶部引入```Less```文件

```js
import '~antd/dist/antd.css'
```

最后修改：2022 年 12 月 07 日