只写一个页面而采用antd官方的框架显得有点臃肿，所以决定把项目搬迁到create-react-app脚手架建立的项目上，由于此前没有使用过create-react-app做项目所以把项目搬迁过来之后问题很多。
因为我写的样式都是less，所以首先要添加对less的支持，先运行：npm run eject，暴露出项目的webpack配置文件，然后安装less,less-loader，(yarn add less less-loader)，接着在配置文件webpack.config.dev.js 和 webpack.config.prod.js 中找到
test: /\.css$/,
改为
test: /\.(css|less)$/,
继续往下，在use[]，中添加
{
loader: require.resolve('less-loader'), //添加对less的支持
options: {
javascriptEnabled: true, //添加对js支持
}
},
两个文件都要修改，至此项目已经可以支持less。
接着要修改的就是css模块化，修改过后就可以使用
className={styles.title}
方式来设置class，否则无法识别，添加方式很简单
loader: require.resolve('css-loader'),
options: {
module: true, //CSS模块化 添加这一行就行
importLoaders: 1,
},
同样两个文件都要修改。
最后导入antd并设置antd按需加载，先安装antd,(yarn add antd )，然后在两个配置文件中加入
plugins: ['transform-runtime', ['import', {
libraryName: 'antd',
style: 'css'
}]]
即
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
plugins: ['transform-runtime', ['import', {
libraryName: 'antd',
style: 'css'
}]]
},
},
antd按需加载配置完成，但是此时antd样式还是无效，这个问题我弄了很久，后来发现原来是前面的css模块化影响了antd样式，要把antd样式和自己写的样式分开配置。
自己写的样式配置：
test: /\.(css|less)$/,
exclude: [/node_modules/], //自己写的样式
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
module: true, //CSS模块化
importLoaders: 1,
},
},
antd样式配置，重新添加一个：
test: /\.(css|less)$/,
include: [/node_modules/], //非自己写的样式,无需css模块化
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
这样antd样式就可以生效了。
注：以上配置都要在两个配置文件中配置，webpack.config.dev.js为开发环境，webpack.config.prod.js为上线生产环境。
迁移过来之后现在还有个问题未解决，用create-react-app打开项目之后每个包着图表的div，图表为canvas，都莫名奇妙高度多了5px；且都为div底部与canvas的距离，但是并无margin和padding，且项目在原来的环境下运行布局正常。
-------------------------------------------------------------------分割线-------------------------------------------------------------------
2018-9-27 10:05 更新
最后的遗留问题已经解决,困扰了很久的问题没想到解决方法非常简单。
canvas{
display: block;
}
那莫名的5px，Duang的一下就不见了。