前端ui框架 Antd For React(Webpack)总结

# Antd For React (Webpack)

### 总结一下使用阿里的antd这个ui框架的正确姿势(官网推荐的按需加载方式)

1. 本文针对在现有项目中引入antd

2. 二话不说: npm install antd --save

3. 在.babelrc文件中加入:

{

  "plugins": [

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

  ]

}

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

{ "libraryName": "antd", "style": "css" }]这段放到plugins数

组里。

4. 执行: 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/再试试。