react中如何使用配置less

react中如何使用配置less

配置前先运行

yarn eject

安装

yarn add less-loader 

在webpack.config.js文件中新增内容

	const cssRegex = /\.css$/;
	const cssModuleRegex = /\.module\.css$/;
	const sassRegex = /\.(scss|sass)$/;
	const sassModuleRegex = /\.module\.(scss|sass)$/;
	
	// less 新增两行
	
	const lessRegex = /\.less$/;
	const lessModuleRegex = /\.module\.less$/;

   {
	    test: sassRegex,
	    exclude: sassModuleRegex,
	    use: getStyleLoaders(
		      {
		        importLoaders: 2,
		        sourceMap: isEnvProduction && shouldUseSourceMap,
		      },
     		 'sass-loader'
   		 ),
   		 sideEffects: true,
  },
  {
	    test: sassModuleRegex,
	    use: getStyleLoaders(
		      {
			        importLoaders: 2,
			        sourceMap: isEnvProduction && shouldUseSourceMap,
			        modules: true,
			        getLocalIdent: getCSSModuleLocalIdent,
		     },
     		 'sass-loader'
  	  	),
  },

  // less 新增两条
  {
    test: lessRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'less-loader'
    ),
    sideEffects: true,
  },

  {
    test: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
      },
      'less-loader'
    ),
  },

运行后如果报错以下错：

安装

yarn add less

运行后如果报Error: Cannot find module '@babel …”错误

更新bable到最新版本就可以了

yarn add -D babel-loader @babel/core @babel/preset-env webpack

主页传送门