在react中配置less

第一步：暴露出webpack配置文件

终端命令：npm run eject (此命令一旦运行不可逆)

第二步：安装less以及less-loader

npm install less less-loader --save-dev

第三步：修改webpack的配置文件

运行完以上命令后，项目根目录下会多出一个 config 文件夹，找到里面的 webpack.config.js 这个文件

image.png

第四步：增加less配置

image.png

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

全局搜索oneOf，在oneOf数组中添加以下代码：

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

这样就配置完成，可以直接使用less了。

解释：上面的配置完成后在使用less的时候可以通过两种方式引入，一种是lessRegex，一种是lessModuleRegex的方式，写法如下：

通过模块的方式引入 import styles from "./index.module.less";
直接引入 import "./index.less";

image.png