React中组件使用less并且使用postcss-loader、postcss-px2rem时报错:Error: undefined:3:5: missing '}'

通过使用create-react-app创建的react项目,添加了less预处理器后,可以正常编译,没有问题,但是项目时移动端项目,我们需要做移动端的适配,将px单位转化为rem,具体的方式,根据百度来的方式,配置上了,结果报了异常了:如下:

./src/pages/login/login.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/less-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./src/pages/login/login.less)
Error: undefined:3:5: missing '}'

给的提示时缺少了“}”,回去看代码,发现less并没有缺少什么,没有任何问题.我尝试把less中的嵌套代码给拆了出来,不在做嵌套了,像css一样组织代码,再重新编译运行项目,错误没有了:

这是有代码嵌套,有问题的:

.login {
    padding-top: 250px;
    .logo {
        margin-bottom: 60px;
    }
}

下面把代码从嵌套中提取了出来,就没有问题了:

.login {
    padding-top: 250px;   
}
.logo {
    margin-bottom: 60px;
}

从这里可以得出一个结论,就是less代码是没有问题的,那么问题应该就是出现了webpack中的配置中了.

后来梳理了一下流程,原来是loader的加载顺序不对:我们使用postcss-loader处理px转化rem的时候,但是它并没有找到css文件,而又不认识less文件类型,这里我们应该调整一下加载less-loader和postcss-loader的加载顺序,可以参考:

{
				loader: require.resolve('css-loader'),
				options: cssOptions,
			},
			{
				// Options for PostCSS as we reference these options twice
				// Adds vendor prefixing based on your specified browser support in
				// package.json
				loader: require.resolve('postcss-loader'),
				options: {
					// Necessary for external CSS imports to work
					// https://github.com/facebook/create-react-app/issues/2677
					ident: 'postcss',
					plugins: () => [
						require('postcss-flexbugs-fixes'),
						require('postcss-preset-env')({
							autoprefixer: {
								flexbox: 'no-2009',
							},
							stage: 3,
						}),
						px2rem({
							remUnit: 75
						}),
						// Adds PostCSS Normalize as the reset css with default options,
						// so that it honors browserslist config in package.json
						// which in turn let's users customize the target behavior as per their needs.
						postcssNormalize()
					],
					sourceMap: isEnvProduction && shouldUseSourceMap,
				},
			},
			{
				loader: require.resolve('less-loader'),
				options: lessOptions,
			}

这样,问题,就解决了.

需要体检了解下webpack配置中loader的加载顺序:webpack中配置的多个loader,加载顺序为从右到左,可以参考:https://webpack.docschina.org/concepts/loaders/