1、安裝antd? ? ?npm install?antd
2、按需加載? ???npm install @craco/craco? ?
修改
/* package.json */
"scripts": {
????-? "start": "react-scripts start",
????-? "build": "react-scripts build",
????-? ?"test": "react-scripts test",
????+? "start": "craco start",
????+? "build": "craco build",
????+? "test": "craco test",
}
然后在項目根目錄創(chuàng)建一個?craco.config.js?用于修改默認(rèn)配置。
/* craco.config.js */
module.exports = {?
?// ...
};
3、less配置??npm install craco-less?
4、配置主題
并修改?craco.config.js?文件如下:
module.exports = {?
?????plugins: [?
?????????{?
?????????????plugin: CracoLessPlugin,?
?????????????????options: {?
?????????????????????lessLoaderOptions: {?
?????????????????????????lessOptions: {?
?????????????????????????????????modifyVars: {?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????'@primary-color': ????????'#1DA57A'?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?javascriptEnabled: true,?
? ? ? ? ? ? ? ? ? ? ? ? ? ?},?
? ? ? ? ? ? ? ? ? ? },?
?????????????},?
?????????},?
?????],
};
5、CSS模塊化
cssLoaderOptions:?{
??????????modules:?{?localIdentName:?"[local]_[hash:base64:5]"?}
}
tips:
? ? 1、可以把base64去掉直接顯示hash
? ? 2、css模塊化配置成功后，以對象形式使用樣式
? ? 3、全局樣式
eg：
? ? :glabol(.box){
????????width：50px;
? ? ? ? height:50px;
? ? ? ? borde:1px solid red;
????}
6、proxy配置
在craco.config.js文件中添加?
7、配置別名
