在本文撰寫(xiě)之時(shí)，按照官方在線文檔https://mobile.ant.design/docs/react/use-with-create-react-app-cn的步驟搭建antd-mobile的環(huán)境，CSS樣式無(wú)法生效。研究了一下，特此做一個(gè)記錄，希望能幫助到更多的人。
第一步：安裝官方腳手架 create-react-app，命令如下，mac系統(tǒng)下安裝的自行在npm前添加$即可.
npm?install?-g?create-react-app
建議使用淘寶鏡像安裝，速度會(huì)更快一些命令如下：
cnpm?install?-g?create-react-app
安裝好后，就可以用如下命令建立你的react應(yīng)用了，其中的myshop是你自己取的項(xiàng)目名稱
create-react-app myshop
有不少同學(xué)在進(jìn)行此步驟來(lái)創(chuàng)建一個(gè)新的React應(yīng)用時(shí)由于某原因,在拉取各種資源過(guò)程中往往會(huì)巨慢，這里提出一個(gè)解決辦法，就是將下載資源的地址永久設(shè)置為淘寶的鏡像。
npm config set registry https://registry.npm.taobao.org
然后我們?cè)隍?yàn)證一下
npm config get registry
--或 npm info express
這樣設(shè)置后，在運(yùn)行create-react-app命令建立項(xiàng)目 ，你會(huì)發(fā)現(xiàn)快了好多，而且通常情況下都能順利完成；
之后進(jìn)入項(xiàng)目文件夾的根目錄，啟動(dòng)項(xiàng)目，命令行如下：
cd myshop
npm start
此時(shí)，通常會(huì)自動(dòng)啟動(dòng)瀏覽器，命令窗口顯示：
Compiled successfully!
You can now view myshop in the browser.
? Local:? ? ? ? ? ? http://localhost:3000/
? On Your Network:? http://192.168.0.132:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.
通過(guò)瀏覽器訪問(wèn)http://localhost:3000/或?http://192.168.0.132:3000/應(yīng)該可以看到歡迎畫(huà)面了，進(jìn)行到這里說(shuō)明通過(guò)Create-React-App腳手架創(chuàng)建的項(xiàng)目成功啟動(dòng)！
打開(kāi)編輯器，筆者使用的Atom，此時(shí)目錄結(jié)構(gòu)為下圖所示：
自己配置過(guò)webpack的同學(xué)可能會(huì)發(fā)現(xiàn)，“好像少點(diǎn)什么？”，create-react-app腳手架工具對(duì)webpack配置文件進(jìn)行了隱藏，為了能夠順利的搭建antd-mobile，我們需要讓配置文件“顯示出來(lái)”，命令如下：
npm run eject
小提示：運(yùn)行前您可能需要按CTRL+C退出啟動(dòng)的項(xiàng)目
運(yùn)行后，發(fā)現(xiàn)它會(huì)執(zhí)行一系列安裝..出現(xiàn)如下結(jié)果說(shuō)明成功完成：
Running npm install...
added 117 packages and updated 1 package in 14.894s
Ejected successfully!
Please consider sharing why you ejected in this survey:
http://goo.gl/forms/Bi6CZjk1EqsdelXk1
這時(shí)，我們發(fā)現(xiàn)多了一個(gè)項(xiàng)目文件夾，config，具體如下：
為了閱讀這篇文章的同學(xué)后面少些坑，我們順手解決下打包路徑的問(wèn)題。用create-react-app腳手架搭建的react項(xiàng)目使用 npm run build 之后生成的打包文件只能在根目錄訪問(wèn)，這樣放在服務(wù)器目錄就訪問(wèn)不到了，為了你們不要和我一樣打包后在哭著百度解決方案，在這里一并放出：
config文件夾下面找到paths.js文件，打開(kāi)后大約在34~39行前后有如下代碼：
function getServedPath(appPackageJson) {
? const publicUrl = getPublicUrl(appPackageJson);
? const servedUrl =envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
? return ensureSlash(servedUrl, true);
}
將這句修改為：(仔細(xì)看，最后面的"/"前面加了一個(gè)".")
const servedUrl =envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
下面進(jìn)行LESS CSS預(yù)處理器配置，antd-mobile依賴LESS模塊，不安裝和配置好，樣式是不會(huì)起作用的，在項(xiàng)目根目錄運(yùn)行如下命令：
cnpm install less less-loader --save-dev
這里面注意下 less 和 less-loader 都是需要安裝的，不然在啟動(dòng)項(xiàng)目時(shí)就會(huì)報(bào)Error in Cannot find module 'less'?原因是npm @ 3不能再解析peerDependencies了，OK安裝后，我們還要著手配置下，打開(kāi)config文件夾中的webpack.config.dev.js文件，搜索“exclude:”? 找到大概這么一行：
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader')
... ...
在exclude: 后面的數(shù)組中加入一項(xiàng)? ?/\.less$/? ?這行變?yōu)?/p>
exclude: [/\.js$/, /\.html$/, /\.json$/,/\.less$/],
然后在loders中加入一段：
//新增less支持
{ test: /\.less$/, use: [ require.resolve('style-loader'), require.resolve('css-loader'), { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ pxtorem({ rootValue: 100, propWhiteList: [], }), autoprefixer({ browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'], }), ], }, }, { loader: require.resolve('less-loader'), options: { modifyVars: { "@primary-color": "#1DA57A" }, }, }, ], },
搞不清楚loders結(jié)構(gòu)的同學(xué)，找下如下代碼，加在其最后一個(gè)花括號(hào)下方即可：
{
? ? ? ? ? ? test: /\.(js|jsx|mjs)$/,
? ? ? ? ? ? include: paths.appSrc,
? ? ? ? ? ? loader: require.resolve('babel-loader'),
? ? ? ? ? ? options: {
? ? ? ? ? ? ? plugins: [
? ? ? ? ? ? ? ? ? ? ? ['import', { libraryName: 'antd-mobile', style: true }],
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? // This is a feature of `babel-loader` for webpack (not Babel itself).
? ? ? ? ? ? ? // It enables caching results in ./node_modules/.cache/babel-loader/
? ? ? ? ? ? ? // directory for faster rebuilds.
? ? ? ? ? ? ? cacheDirectory: true,
? ? ? ? ? ? },
? },
一模一樣的方式在 config文件夾里的webpack.config.prod.js里在做一遍，這步配置就完成了。接下來(lái)安裝babel-plugin-import ，然后就可以按需加載組件了，并且它會(huì)自動(dòng)關(guān)聯(lián)css樣式，無(wú)需單獨(dú)引入。我們只需要這樣引入一次即可：import { Button } from 'antd-mobile';詳細(xì)的見(jiàn)官網(wǎng)吧。
cnpm install babel-plugin-import --save-dev
安裝完畢后,在webpack.config.dev.js中找到這段代碼按如下配置:
{
? ? test: /\.(js|jsx)$/,
? ? include: paths.appSrc,
? ? loader: require.resolve('babel-loader'),
? ? options: {
? ? ? plugins: [
? ? ? ? ['import', { libraryName: 'antd-mobile', style: true }],
? ? ? ],
? ? ? // This is a feature of `babel-loader` for webpack (not Babel itself).
? ? ? // It enables caching results in ./node_modules/.cache/babel-loader/
? ? ? // directory for faster rebuilds.
? ? ? cacheDirectory: true,
? ? },
},
至此，Create-React-App腳手架搭建antd-mobile并進(jìn)行按需加載的開(kāi)發(fā)環(huán)境配置完畢！
