creat-react-app Ver2.0+配置 less-l

说明:所有修改均在config/webpack.config.js文件

安装 less 支持组件

yarn add less-loader less

在文件中添加 less 规则

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

添加 loader 信息

    //修改getStyleLoaders方法中下属内容
    
    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
           sourceMap: isEnvProduction && shouldUseSourceMap,
          +javascriptEnabled: preProcessor === 'less-loader'  /
        },
      });
    }
    
    // 在 module:{}中的 rule 下增加下述 less-loader 信息
    
     //less相关配置
        //普通模式
    {
      test: lessRegx,
      exclude: [lessModuleRegex],
      use: getStyleLoaders(
          {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
          'less-loader'
      ),
      sideEffects: true,
    },
        //module 模式
    {
      test: lessModuleRegex,
      exclude:[/node_modules/],//针对第三方的 less 文件不进行 module 化
      use: getStyleLoaders(
          {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
          },
          'less-loader'
      ),
    }