全局引用样式
当js引入ant-design的Button组件时，组件文件只会引用Button相关的，但样式文件会加载全部组件的
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
在APP.js中，要引入所有样式文件才会生效：
@import '~antd/dist/antd.css';
这样的话组件样式是会生效，但是明显很多组件样式没用到，这就无形中增大了文件体积，所以需要按需加载，只加载那些引用了的样式文件。
使用 babel-plugin-import 实现按需加载
引入babel-plugin-import
yarn add babel-plugin-import -D
然后修改pachage.json中的babel对象或者添加.babelrc配置文件，修改过后：
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
},
这样就可以像下面这样在组件中愉快地按需加载ant的组件文件和样式了
import { Button } from 'antd'
这里需要特别说明的配置项是style,默认为css，即加载时ant组件编译过后的css文件，如果为true,则是加载组件的less文件，如果我们需要修改antd一些主题样式的全局变量，就可以设为``true`。
引入less-loader修改主题样式
- 首先得引入
less和less-loader，因为ant的的样式是用less写的
yarn add less less-loader -D
- 将上面
plugins中的style设为true - 在
webpack.config.js中加入less-loader配置，找到module对象，添加代码：
//antd less 文件编译
{
test: /\.less$/,
include: [/node_modules/],
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
options: {
modifyVars: {
'primary-color': '#1fb5ab',
'link-color': '#1fb5ab',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
}],
},
配置项中modifyVars中的就是要修改的less全局变量信息，想看更多查询官方文档
关于引入less-loader之后编译时报Unrecognised input的问题
这个我查询了一些资料，发现大家的报错原因和我的不太一样，最后和同事讨论之后定位问题是因为less-loader引入位置问题，汗！
由于create-react-appv3是集成的webpack4.x,很多配置项都集成到了一起，而不是像之前版本那样会暴露一个webpack.config.dev.js和webpack.config.prod.js了。在新的脚手架中我们只要修改webpack.config.js中的loader配置。并且一定要在oneOF数组中添加上面的配置：（我之所以编译报Unrecognised input问题就是直接在rules中添加less-loader配置结果匹配到了file-loader导致的）
