react+antd後臺管理系統(1)環境初始化
阿新 • • 發佈:2019-02-19
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,
}
}