在react中配置less

前端小芬芬2023-07-24 19:49

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

javascript 复制代码

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

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

javascript 复制代码

npm install less less-loader --save-dev

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

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

第四步：增加less配置

javascript 复制代码

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

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

javascript 复制代码

    {
        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了。

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

参考地址