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
           

首頁傳送門