### 總結一下使用阿里的antd這個ui框架的正確姿勢(官網(wǎng)推薦的按需加載方式)

1. 本文針對在現(xiàn)有項目中引入antd

2. 二話不說: npm install antd --save

3. 在.babelrc文件中加入:

{

? "plugins": [

? ? ["import", { "libraryName": "antd", "style": "css" }]

? ]

}

如果.babelrc文件已有其他的plugins，那就將["import",

{ "libraryName": "antd", "style": "css" }]這段放到plugins數(shù)

組里。

4. 執(zhí)行: npm install babel-plugin-import --save-dev

.babelrc文件中import是需要安裝babel-plugin-import插件的。

5. 使用:

import { DatePicker } from 'antd';

ReactDOM.render(<DatePicker />, mountNode);

PS:按需加載方式只需從 antd 引入模塊即可，無需單獨引入樣式

6. 問題:

如果有樣式無效的情況,可能是webpack.production.config.js文件中:

module: {

? ? ? ? loaders: [

? ? ? ? ? ? {test: /\.css$/, exclude: /node_modules/, loader:

? ? ? ? ? ? ExtractTextPlugin.extract('style', 'css!postcss')},

? ? ? ? ]

? ? }

? ? 包含了exclude: /node_modules/，這樣會排除node_modules文件夾下的樣式，去掉exclude: /node_modules/再試試。