create-react-app使用antd 3.x和less

在create-react-app 3.x使用antd和less有两种办法：

1. 在npm run eject前配置antd和less
2. 在npm run eject后配置antd和less

下面分别来说一下这两种办法怎么配置

一、在npm run eject前配置antd和less

1. 首先安装antd

npm i antd --save

这个时候需要对create-react-app默认配置进行自定义，使用react-app-rewired, 这个是对自定义配置create-react-app社区提供的解决方案， 同时react-app-rewired2.x需要customize-cra，所以到第二步

2. 安装react-app-rewired 和 customize-cra

npm i react-app-rewired customize-cra --save-dev

安装react-app-rewired后配置文件package.json需要修改

3. 修改package.json配置文件

/* package.json 原文件*/
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

更改为

/* package.json 现文件*/
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

更改完成之后需要创建react-app-rewired配置文件

4. 创建配置文件

在项目根目录创建 名为config-overrides.js的配置文件配置如下

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

5. 使用antd模块化

antd由于改版尽管没有使用antd模块化，都需要在解决模块化为问题，需要安装babel-plugin-import解决问题，安装代码如下

cnpm i babel-plugin-import --save-dev

安装babel-plugin-import后再config-overrides.js修改为如下

/* 从customize-cra中解构出 override  fixBabelImports方法*/
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
		libraryName: 'antd',
		libraryDirectory: 'es',
		/*
		使用less则配置成 style: true
		否则配置成style: 'css'
		*/
		style: true
	}), 
)

6. 项目中使用less

首先要安装项目中的less解析loader，代码如下

cnpm i less less-loader --save-dev

然后再config-overrides.js中新增配置如下

/*完整代码*/
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
	fixBabelImports('import', {
		libraryName: 'antd',
		libraryDirectory: 'es',
		style: true
	}), 
	addLessLoader({
		javascriptEnabled: true,
		/*这里可以更改主题色*/
		modifyVars: { 
		'@primary-color': '#1DA57A',
		'@success-color': 'red'
		 },
	})
)

启动项目 npm start 打开页面能够使用antd 就说明配置成功了

运行npm run eject提示commit change错误，需要初始化git重新提交，运行过程如下：

/*初始化git*/
git init
/*讲更改的文件添加到提交缓存中*/
git add .
/*提交并备注*/
git commit -m '备注'

执行npm start 报 react-app-rewired不是内部或外部命令，也不是可运行的程序 安装 react-app-rewired即可

cnpm i react-app-rewired --save-dev

再次执行npm start报Cannot find module ‘react-scripts/package.json’ ，安装react-scripts

cnpm i react-scripts --save-dev

npm satrt 就成功了，哈哈哈哈哈

二、npm run eject后配置antd和less

项目安装好后直接执行npm run eject

1. 首先安装antd

cnpm i antd --save

2. 安装babel-plugin-import

antd模块化需要安装babel-plugin-import，使用less也是需要模块化，在less中使用了js， 安装代码如下

cmpn i babel-plugin-import --save-dev

安装后在package.json中修改配置文件,将babel修改如下

"babel": {
    "presets": [
      "react-app"
    ],
	"plugins": [
		["import", { "libraryName": "antd", 
		/*
		css "style": 'css'
		less "style": 'true'
		*/
		"style": true 
		}] 
	]
  },

3. 项目中使用less

项目中使用less需要在webpack.config.js中新增less 的loader
在定义css sass匹配 loader的地方定义匹配

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
/*添加的地方*/
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

然后再moudle中配置解析less的loader，添加代码如下

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  }, 'less-loader'),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
  test: lessModuleRegex,
  use: getStyleLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules: true,
    getLocalIdent: getCSSModuleLocalIdent,
  },'less-loader'),
},

4. 使用antd.less

项目中就可以使用less了， 但是如果项目中要使用antd.less,还需要配置javasciptEnabled,找到getStyleLoaders方法定义的地方，将 if (preProcessor) {}中的内容替换如下

/*webpack.config.js*/
if(preProcessor === 'less-loader') {
	loaders.push({
		loader: require.resolve(preProcessor),
	    options: {
			javascriptEnabled: true,
			modifyVars: {
				// 修改主题色
				"@primary-color": "#f40"
			},
			sourceMap: isEnvProduction && shouldUseSourceMap,
	    },
	})
} else {
	loaders.push(
	{
	  loader: require.resolve('resolve-url-loader'),
	  options: {
		sourceMap: isEnvProduction && shouldUseSourceMap,
	  },
	},
	{
	  loader: require.resolve(preProcessor),
	  options: {
		sourceMap: true,
	  },
	}
  );
}