React，Antd组件库按需引入步骤

第一步： $ npm install antd --save

按需引入antd的方式有两种：

  第一种是如下所示，比较繁琐，如果想要引入button，就需要引入button及其style，等于说使用一个组件就需要引入两个文件，太麻烦了。

import Button from 'antd/lib/button';  
import 'antd/lib/button/style';
复制代码

  所以更好的方式是第二种，使用 babel，babel-plugin-import来实现同样的按需加载效果。

第二步： $ npm install babel-plugin-import --save

首先在package.json配置

"plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
复制代码

在index.js中引入import 'antd/dist/antd.min.css'

import 'antd/dist/antd.min.css';
复制代码

  引入完成之后发现控制台报了个错

Error:Module parse failed: /Users/miaomiaomiao/Desktop/demo/node_modules/antd/dist/antd.min.css Unexpected character '@' (9:0)
You may need an appropriate loader to handle this file type.
复制代码

  可是明明webpack配置里已经使用了css-loader，为什么还是报错呢？经过一番上网查找之后发现，原来是在webpack loaders 配置的时候需要把 css 和 css modules 分开处理，并加上 exclude or include, 不去处理 antd引用的样式 。所以在webpack.config.js的loaders里面加上下面这一段代码

  {
    test: /\.css$/,
    loader: 'css?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!!',
    exclude: /node_modules/,
  },
  {
    test: /\.css$/,
    loader: 'style!css',
  }

复制代码

  然后Error就解决啦。


-----------------------一只萌萌哒分割线-----------------------
之前在掘金一直是个小透明（em，可能以后也是个小透明哈?），那现在为什么想要开始写文章记录一下呢？因为发现自己自从去年毕业之后记忆力是越来越不好，如果不去记一下，怕以后想用到的时候又忘了，再去踩同样的坑，那就太浪费时间了。。。em，还有一点就是想要自律一些，监督自己去总结一下，千里之行，始于足下，毕竟有了第一步才可能有之后的9步，99步，999。。。步～

第一次在技术平台写文章，如有不足，欢迎指正，如有遗漏，欢迎补充～～～