解惑React项目引入less不生效的问题

今天自己从0-1使用create-react-app脚手架搭建项目发现，引入less文件不会生效，因此记录下解惑过程。

查了文档发现，原来使用create-react-app创建的项目默认不支持less，所以要手动配才行。

我们发现，使用脚手架创建的项目目录下，并没有相关webpack的配置，这是因为webpack等相关配置被隐藏了起来。

那如何解决文件被隐藏以及引入less不生效的问题呢？

请往下看：

暴露配置文件

使用npm run eject命令将webpack的隐藏配置弹出

注意：如果报错，先将自己本地代码git add .,git commit -m 'init'

安装less和less-loader

npm i less less-loader

修改webpack配置

找到config/webpack.config.js文件

因为脚手架默认集成了sass的配置，所以可以参考sass的配置，先进行声明变量:

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

然后在module.rules里面新增如下配置:

    // 再在rules数组中添加下面一段代码
    // Less 解析配置
    {
        test: lessRegex,
        exclude: lessModuleRegex,
        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'
        )
    },

通过以上操作就可以解决less不生效的问题啦。