在react中配置less

最新推荐文章于 2024-02-19 10:49:52 发布

前端小芬芬

最新推荐文章于 2024-02-19 10:49:52 发布

阅读量822

点赞数

分类专栏： css react 文章标签： react.js less 前端

本文链接：https://blog.csdn.net/yf18040578780/article/details/131854779

版权

css 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

react

2 篇文章 0 订阅

订阅专栏

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

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

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

npm install less less-loader --save-dev

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

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

第四步：增加less配置

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

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