create-react-app + webpack + antd + less 踩坑记录

首页 > 我的学习历程作者：月丶 2018年9月26日 16:04 星期三热度：4371° 百度已收录

时间：2018-9-26 16:04 热度：4371°

只写一个页面而采用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,
	
		},
	
		},