react中用less的问题

 更新时间:2024年04月19日 08:26:50   作者:Mr_wuying  
本文主要介绍了react中用less的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

加载依赖

yarn add @craco/craco less less-loader --dev
npm install craco-less   

在这里你要用到@craco/craco,less,less-loader,craco-less

这里添加依赖会出现兼容问题craco-less   跟react-scripts和@craco/craco版本兼容

https://www.npmjs.com/package/craco-less

官网上有给到可兼容的版本信息

修改一下本地项目版本

npm add  --exact react-scripts@5.0.1 -D 
npm add  --exact @craco/craco@7.1.0 -D  

创建文件

然后在项目的根目录建craco.config.js  

 craco.config.js  

const lessPlugin = require("craco-less");

module.exports = {
  // 插件
  plugins: [
    {
      plugin: lessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // antdv 主题之类的配置
            // modifyVars: { "@primary-color": "#1DA57A" },
            javascriptEnabled: true
          }
        }
      }
    }
  ],
  
}

修改文件package.json

将 react-scripts 相关的脚本替换为 craco。修改 package.json 文件中的 scripts 部分,如下所示:

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

补充

如果出现下面报错

解决办法

cnpm install axios qs --save
cnpm install antd babel-plugin-import --save

在执行 npm start

到此这篇关于react中用less的问题的文章就介绍到这了,更多相关react less 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react如何获取state的值并更新使用

    react如何获取state的值并更新使用

    这篇文章主要介绍了react如何获取state的值并更新使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • React应用中使用Bootstrap的方法

    React应用中使用Bootstrap的方法

    本篇文章主要介绍了React应用中使用Bootstrap的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React Redux应用示例详解

    React Redux应用示例详解

    这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去,本文给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • ReactiveCocoa代码实践之-UI组件的RAC信号操作

    ReactiveCocoa代码实践之-UI组件的RAC信号操作

    这篇文章主要介绍了ReactiveCocoa代码实践之-UI组件的RAC信号操作 的相关资料,需要的朋友可以参考下
    2016-04-04
  • 在React中this容易遇到的问题详解

    在React中this容易遇到的问题详解

    这篇文章主要介绍了在React中this容易遇到的问题总结,文中有详细的示例代码,希望对大家有一定的帮助,需要的朋友可以参考下
    2023-05-05
  • React利用lazy+Suspense实现路由懒加载

    React利用lazy+Suspense实现路由懒加载

    这篇文章主要为大家详细介绍了React如何利用lazy+Suspense实现路由懒加载,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-06-06
  • React useCallback钩子的作用方法demo

    React useCallback钩子的作用方法demo

    这篇文章主要为大家介绍了React useCallback钩子的作用方法demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React Hooks 实现的中文输入组件

    React Hooks 实现的中文输入组件

    这篇文章主要为大家介绍了React Hooks实现的中文输入组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • react如何实现一个密码强度检测器详解

    react如何实现一个密码强度检测器详解

    这篇文章主要给大家介绍了关于react如何实现一个密码强度检测器的相关资料,使用这个密码强度器后可以帮助大家提高在线帐号、个人信息的安全性,需要的朋友可以参考下
    2021-06-06
  • React根据配置生成路由的示例代码

    React根据配置生成路由的示例代码

    React路由看似只能由Route组件包裹组件的结构来构成,但是其实也可以通过编写路由数组配置然后通过数组循环来生成Route组件包裹组件的结构,所以本文给大家介绍了React根据配置生成路由的方法,需要的朋友可以参考下
    2024-11-11

最新评论