React中引入less、less-loader问题

 更新时间:2024年01月24日 10:05:35   作者:dayTimeAffect  
这篇文章主要介绍了React中引入less、less-loader问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

官方的 create-react-app创建的项目默认是不支持 less 的,但是又写不惯其他的预处理语言

方法

第一步

//安装 less与less-loader
yarn add less less-loader --save-dev

第二步

//弹出默认配置,create-react-app创建的项目默认是没有webpack.config.js的
yarn eject

第三步

// 在webpack.config.js文件中,仿sass的引入
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

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

注意

TypeError: this.getOptions is not a function 错误

image.png

这是由于less-loader版本过高导致,使用7.3.0版本即可。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    这篇文章主要介绍了React Native中ScrollView组件轮播图与ListView渲染列表组件用法,结合实例形式详细分析了ScrollView组件轮播图与ListView渲染列表组件具体功能、使用方法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • 在react-antd中弹出层form内容传递给父组件的操作

    在react-antd中弹出层form内容传递给父组件的操作

    这篇文章主要介绍了在react-antd中弹出层form内容传递给父组件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    今天是使用 Reactjs + Nodejs + Mongodb 实现文件上传功能,前端我们使用 Reactjs + Axios 来搭建前端上传文件应用,后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2022-06-06
  • 使用React封装一个Tree树形组件的实例代码

    使用React封装一个Tree树形组件的实例代码

    这篇文章主要介绍了使用React封装一个Tree树形组件的实例,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-03-03
  • React State与生命周期详细介绍

    React State与生命周期详细介绍

    React将组件(component)看成一个状态机(State Machines),通过其内部自定义的状态(State)和生命周期(Lifecycle)实现并与用户交互,维持组件的不同状态
    2022-08-08
  • React竞态条件Race Condition实例详解

    React竞态条件Race Condition实例详解

    这篇文章主要为大家介绍了React竞态条件Race Condition实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React获取input值并提交的2种方法实例

    React获取input值并提交的2种方法实例

    这篇文章主要给大家介绍了关于React获取input值并提交的2种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React重新渲染超详细讲解

    React重新渲染超详细讲解

    什么是re-render(重新渲染)?哪些是必要的re-render?哪些是非必要的re-render?如果你对这些问题还不是很明白,那么可以在这篇文章中找到答案
    2022-11-11
  • react项目优化配置的操作详解

    react项目优化配置的操作详解

    这篇文章主要介绍了react项目优化配置,主要包括优化配置CDN,优化路由懒加载,结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • React18新增特性released的使用

    React18新增特性released的使用

    本文主要介绍了React18新增特性released的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05

最新评论