如何在React工程中配置less支持？

Less是css的一个变种，css的一个高级体现，与其类似的还有sass，都是一种编译型样式语言。这样的语言对于程序员而言，具有更高的可读性，理解起来也容易很多，层次性较好，这在这几年市场的选择也可以明显看出。如此，这就需要我们对当前的项目进行less依赖，从而让我们的项目支持less。

依赖下载

$yarn add less less-loader #或者
$npm install less less-loader

无论是less亦或者是sass都是通过对文件的编译生成新的css的过程。因此，如果我们想要库能实现less支持，需要先加载基础的依赖库。

修改配置文件

依赖安装好了后，我们还需要修改我们的less配置，以实现webpack在打包时同时编译打包less文件，想要修改配置需得先将配置文件找到，webpack脚手架为安全考虑，默认是将config文件隐藏。因此，我们需要先暴露配置文件，然后再修改配置。

• 获取配置文件

获取配置文件可通过如下脚本触发。

$yarn eject

• 修改config/webpack.config.js

我们需要在webpack.config.js中添加css的模块规则，配置类似其中的css配置方式:

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: lessRegex,
                            exclude: lessModuleRegex,
                            use: getStyleLoaders({
                                    importLoaders: 3,
                                    sourceMap: isEnvProduction && shouldUseSourceMap,
                                },
                                'less-loader'
                            ),
                            // Don't consider CSS imports dead code even if the
                            // containing package claims to have no side effects.
                            // Remove this when webpack adds a warning or an error for this.
                            // See https://github.com/webpack/webpack/issues/6571
                            sideEffects: true,
                        }, {
                            test: lessModuleRegex,
                            use: getStyleLoaders({
                                    importLoaders: 3,
                                    sourceMap: isEnvProduction && shouldUseSourceMap,
                                    modules: {
                                        getLocalIdent: getCSSModuleLocalIdent,
                                    },
                                },
                                'less-loader'
                            ),
                        },

使用

如此就完成了less在react中的配置，实现了react中支持less文件。之后我们就可以创建less并在js中导入less文件来生效样式。

/**index.less **/

body{
  font-size:14px;
  height:100%;
  .main {
     max-width:1200px;
     height:100%;
  }
}