初始化react項目

我們首先使用react腳手架創(chuàng)建一個項目 + Ant Design + less

creact-react-app中文文檔

creact-react-app demo

生產(chǎn)環(huán)境打包運行

當我們執(zhí)行了 npm run build 打包后直接訪問index.html 看效果白屏 這時候就需要安裝一個serve包

npm install -g serve

當我們安裝完成后 我們必須首先執(zhí)行npm run build 完成打包 然后執(zhí)行 serve build 訪問就可以

Ant Design + 按需打包

安裝 antd

tip: npm i antd 這里antd版本很多，一定要看好自己使用的版本。現(xiàn)在版本有一些配置是不一樣的。

我這里是安裝的3.多版本 npm i antd@3.26.16

配置按需打包

antd官網(wǎng)配置教程

tip: antd 官網(wǎng)已經(jīng)給出了按需打包的教程,3.x版本以上的 按需打包配置不同 我這里是3.x的配置，完全可以根據(jù)官網(wǎng)來

tip： 官網(wǎng)教程里面的自定義主題教程 安裝less包 npm install less less-loader --save

安裝最新版本的包可能會有報錯 下面是我目前的版本

npm i less-loader@5.0.0

踩坑：在跟著官網(wǎng)配置自定義主題的時候報如下錯誤 config-overrides.js
以下是官網(wǎng)配置：

報錯：

解決方法：添加adjustStyleLoaders 因為使用腳手架創(chuàng)建的webpack版本導(dǎo)致的。

adjustStyleLoaders(({ use: [, , postcss] }) => {const postcssOptions = postcss.options;postcss.options = { postcssOptions };})

修改配置不要忘了重啟項目
修改配置不要忘了重啟項目
修改配置不要忘了重啟項目

最后看效果圖： 使用less 加 antd

下一章：： 安裝react-router 封裝路由