基于create-react-app官方脚手架搭建dva模式的项目（二）

先来看下现有项目：

点击 去BBB页面 如下：

点击 去CCC页面 如下：

好，以上是现有项目情况。

下面我们让页面稍微美观一些，引入UI库，这里依然选用阿里系的antd（具体不做介绍，有兴趣的同学可取官网查阅，此UI库也有针对angular的版本，也有mobile移动版，还有自己的antd脚手架，很优秀的UI库哦）

1 安装antd

[javascript]  view plain  copy

1. cnpm i antd --save  

修改AAA.js文件：

[javascript]  view plain  copy

1. import React, { Component } from 'react';  
2. import { Link } from 'dva/router';  
3. import { Button } from 'antd';  
4.   
5. class AAA extends Component {  
6.   render() {  
7.     return (  
8.       <div>  
9.         <p>  
10.           AAA页  
11.         </p>  
12.         <Link to={'/aaa/bbb'}>  
13.           <Button type={'primary'} icon={'link'}>  
14.             去BBB页面  
15.           </Button>  
16.         </Link>  
17.         <br />  
18.         <Link to={'/ccc'}>  
19.           <Button type={'default'} icon={'enter'}>  
20.             去CCC页面  
21.           </Button>  
22.         </Link>  
23.       </div>  
24.     );  
25.   }  
26. }  
27.   
28. export default AAA;  

然后运行npm start，不出意外，会按预期出现按钮形态的页面，好我们刷新页面：

为什么没有样式？

对没错，使用antd的时候，还需要一些配置，

2 样式引入，antd官方给出两种引入方式：

（1）全局一次性引入样式

（2）按需加载样式（当然我们最终会使用这种咯）

首页说一下全局一次性引入方式：

在src下的index.css目录中直接@import '~antd/dist/antd.css'; 引入即可，刷新页面如下：

但是这种一次性把样式文件全部引入，对资源的占用和性能消耗不友好，故我们采用按需引用方式。

这里特别说明：按需引入的方式，与之前我们穿件create-react-app项目时，是否eject暴露配置不同，也就是没有eject的引入方式和eject过的引入方式有差异；因我们的项目暴露配置了，这里只讲eject过的配置方法，至于未eject的配置方法antd官方有详细说明：https://ant.design/docs/react/use-with-create-react-app-cn

3 安装babel-plugin-import，这是一个用于按需加载组件代码和样式的 babel 插件

[javascript]  view plain  copy

1. cnpm i babel-plugin-import --save //antd按需加载  

首先去除index.css中的引入；

然后修改相关配置，有两种方式可处理，二者选其一即可：

（1）package.json文件中找到babel配置项增加如下代码：

[javascript]  view plain  copy

1. "plugins": [  
2.       [  
3.         "import",  
4.         {  
5.           "libraryName": "antd",  
6.           "style": "css"  
7.         }  
8.       ]  
9.     ]  

修改完后如图：

此时，重启服务，刷新页面即可看到：

（2）第二种方式需修改config目录下的webpack.config.dev.js和webpack.config.prod.js，切记开发环境和生产环境一并修改了，一遍之后编译打包时，避免不必要错误；

打开文件，搜索babel-loader，找到options添加如下：

以上两种方式均可实现，antd样式的按需引入，觉得OK吧，NO NO NO，到现在我们引入的都是css，其实我们知道less和sacc才是样式的王者，没错接下来，快乐的吧css替换为less吧（antd官方也推荐使用less方式，便于样式覆盖和主体定义，灵活性可想而知）。

4 less样式配置

同样，此处的配置页分为eject过的项目和未eject的项目两种，后者antd逛网有详细描述，可参考，此处只讲本项目中的配置方式，要用less，当然少不了安装less和less-loader了，运行安装：

[javascript]  view plain  copy

1. cnpm i less less-loader --save  

默认的脚手架中不支持less的，那我们就要配置咯，打开webpack.config.dev.js和webpack.config.prod.js，记得两者一并修改了；

步骤1 找到 .css 修改为 .(css|less)

步骤2 在use中增加代码，引入less-loader:

[javascript]  view plain  copy

1. {  
2.   loader:require.resolve('less-loader'),  
3.   options: { javascriptEnabled: true }  
4. }  

如图：

步骤3 修改package.json的babel配置项：

style项可设置为true或者“css”均可

步骤4 修改src下index.css为index.less

步骤5 修改src下index.js中引入的index.css为index.less 如图：

至此，重启服务npm start刷新页面：

less配置已经成功。