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如何获取URL中参数

    react如何获取URL中参数

    这篇文章主要介绍了react如何获取URL中参数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • 解析React中useMemo与useCallback的区别

    解析React中useMemo与useCallback的区别

    这篇文章主要介绍了React中useMemo与useCallback的区别,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 使用Ant Design Anchor组件的一个坑及解决

    使用Ant Design Anchor组件的一个坑及解决

    这篇文章主要介绍了使用Ant Design Anchor组件的一个坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • useEffect 返回函数执行过程源码解析

    useEffect 返回函数执行过程源码解析

    这篇文章主要为大家介绍了useEffect 返回函数执行过程源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • React中实现keepalive组件缓存效果的方法详解

    React中实现keepalive组件缓存效果的方法详解

    由于react官方并没有提供缓存组件相关的api(类似vue中的keepalive),在某些场景,会使得页面交互性变的很差。所以本文为大家介绍了React中实现keepalive组件缓存效果的方法,希望对大家有所帮助
    2023-01-01
  • ReactNative踩坑之配置调试端口的解决方法

    ReactNative踩坑之配置调试端口的解决方法

    本篇文章主要介绍了ReactNative踩坑之配置调试端口的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • react 路由权限动态菜单方案配置react-router-auth-plus

    react 路由权限动态菜单方案配置react-router-auth-plus

    这篇文章主要为大家介绍了react路由权限动态菜单方案react-router-auth-plus傻瓜式配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • React Refs转发实现流程详解

    React Refs转发实现流程详解

    Refs是一个 获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下
    2022-12-12
  • 浅谈react-router@4.0 使用方法和源码分析

    浅谈react-router@4.0 使用方法和源码分析

    这篇文章主要介绍了浅谈react-router@4.0 使用方法和源码分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • 详解React中传入组件的props改变时更新组件的几种实现方法

    详解React中传入组件的props改变时更新组件的几种实现方法

    这篇文章主要介绍了详解React中传入组件的props改变时更新组件的几种实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论