在react项目中配置上less预编译处理语言可行方案

less和sass的用法基本上都差不多，我个人还是比较习惯使用less，所以就在项目中配置了一个less。如果你是使用create react-app的话，会默认配置一个sass这个玩意，只需要安装一下就可以使用了。使用yarn eject或者npm run eject都可以将webpack.config.js文件暴露出来，执行完此命令在根目录下会多出config和scripts文件夹，在config文件夹下可以找到webpack.config.js配置文件。

1. 执行以上操作后，找到以下配置信息

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

2. 在这个配置信息下面新增less配置

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

3. 找到oneof关键字，在这个列表中新增less配置信息，一般react是默认有配置sass，可以将sass配置拷贝一份修改一下就可以了。

{
    
    
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
    
    
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
    
    
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
    
    
      importLoaders: 3,
      sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
      modules: {
    
    
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

4. 在项目中创建less文件后，引入到项目中使用，重新项目。