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",
}
然后在项目根目录创建一个 craco.config.js 用于修改默认配置。
/* 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、配置别名
网友评论