版权声明:Oreo https://blog.csdn.net/weixin_43154931/article/details/82500032
react后台管理系统(1)环境初始化
react + antd + less + 按需加载环境配置
1. 使用create-react-app创建app
create-react-app yinbao-ams2
2. 引入antd和less
yarn add antd
or npm install antd --save
yarn add less less-loader
3. antd实现按需加载 babel-plugin-import
- step1:
-
暴露webpack等配置文件
yarn eject
, -
安装babel-plugin-import
yarn add babel-plugin-import
- 修改配置文件
{
// 修改前
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
},
},
{
// 修改后
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// 新增
plugins: [['import',[{libraryName: 'antd',style: true,}]]],
},
},
4. 结果展示
– 目录结构
– 代码
– 展示
附: less 报错
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
新增
{
loader: "less-loader", // compiles Less to CSS
options: {
javascriptEnabled: true,
}
}