1驮履、創(chuàng)建react工廠
2、安裝antd
yarn add antd
3舵揭、安裝less
yarn add less
yarn add less-loader
4讹挎、安裝react-router-dom
安裝路由
yarn add react-router-dom
5校赤、安裝antd 加載工具
yarn add react-app-rewired customize-cra
修改說明 package.json 文件
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
然后在項目根目錄創(chuàng)建一個 config-overrides.js 用于修改默認配置吆玖。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
6、安裝babel-plugin-import
yarn add babel-plugin-import
修改 config-overrides.js 實現(xiàn)按需加載
+ 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',
+ libraryDirectory: 'es',
+ style: 'css',
+ }),
+ );
修改 config-overrides.js 實現(xiàn)自定義主題
按照 配置主題 的要求马篮，自定義主題需要用到 less 變量覆蓋功能沾乘。我們可以引入 customize-cra 中提供的 less 相關的函數(shù) addLessLoader 來幫助加載 less 樣式，同時修改 config-overrides.js 文件如下浑测。
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
- style: 'css',
+ style: true,
}),
+ addLessLoader({
+ javascriptEnabled: true,
+ modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);
7翅阵、使用eject 打開配置模式
9、webpack 中 less 配置
8迁央、webpack 中 babel-plugin-import 配置
參考https://ant.design/docs/react/introduce-cn
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 會加載 less 文件
}]
]
}
