react v18 less使用(craco)

news/2024/9/24 13:20:04/

方案一、弹出配置(不推荐)

  • 安装依赖:yarn add less less-loader

  • 首先 执行 yarn eject 弹出配置项文件(注意:弹出配置不可逆!)

  • 在 config 文件夹中 找到 webpack.config.js,在如图所示位置,加上下面两行代码:

在这里插入图片描述

// less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
  • 接着在这个文件中搜索 sassRegex,可找到这两块代码,将这两块代码复制,并将其中的 sass 改为 less
    在这里插入图片描述
  • 然后重启,即可编写 less

craco_21">方案二、craco(推荐)

修改前:

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

修改后:

"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"},
  • 根目录新建 craco.config.js
const CracoLessPlugin = require("craco-less");
module.exports = {plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {modifyVars: { "@primary-color": "#1DA57A" }, //主题颜色javascriptEnabled: true,},},},},],
};
  • 完成以上步骤,即可开始编写 less
  • 比如 新建 common.less文件,在index.js中引入
import "./style/common.less";

http://www.ppmy.cn/news/1474134.html

相关文章

ES6 之 Promise 构造函数知识点总结 (四)

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象。 Promise 对象有以下两个特点。 对象的状态不受…

什么叫低频晶振?低频晶振最低频率能达到多少?低频晶振封装尺寸有哪些?

低频晶振指的是那些工作在较低频率范围内的晶体振荡器,通常这类振荡器的标称频率低于8MHz。这些晶振在各种电子设备中都有应用,尤其是在那些需要精确但不需要高频振荡的应用场景中,比如实时时钟(RTC)、低速串行通信接口(如UART、IC等)、以及一…

在Spring Boot项目中集成监控与报警

在Spring Boot项目中集成监控与报警 大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 1. 引言 在当今的软件开发中,监控和报警系统是保证系统稳定性和可靠性的重要组成部分。Spring Boot…

聚观早报 | 2025款比亚迪海豚上市;小米15系列防水细节

聚观早报每日整理最值得关注的行业重点事件,帮助大家及时了解最新行业动态,每日读报,就读聚观365资讯简报。 整理丨Cutie 7月9日消息 2025款比亚迪海豚上市 小米15系列防水细节 荣耀Magic V3将更轻薄 真我GT6通信细节 Apple Watch SE将…

【工具分享】I-Wanna-Get-All——主流OA漏洞检测利用工具

声明:本文档或演示材料仅供教育和教学目的使用,任何个人或组织使用本文档中的信息进行非法活动,均与本文档的作者或发布者无关。 文章目录 I-Wanna-Get-All安装方式功能介绍 GitHub项目地址:https://github.com/R4gd0ll/I-Wanna-G…

安装docker版rabbitmq 3.12

本文介绍在Ubuntu22中安装docker版rabbitmq 3.12。 一、拉取镜像 docker pull rabbitmq:3.12.14-management二、创建数据目录和docker-compose文件 创建目录: cd /root mkdir rabbitmq-docker cd rabbitmq-docker mkdir data chmod 777 data创建docker-compose配…

7月1日微软关店!什么信号?

大家可能看到这条新闻,从7 月 1 日起,微软将关闭中国地区的所有线下授权门店。只留下网上商城和京东店。微软官方回应,根据客户不断变化的需求,评估零售策略,已决定对中国大陆市场的渠道进行整合。 大家有没有觉得很久…

【Python123题库】#货币转换 #个人信息提取(控制结构)

禁止转载,原文:https://blog.csdn.net/qq_45801887/article/details/140081086 参考教程:B站视频讲解——https://space.bilibili.com/3546616042621301 有帮助麻烦点个赞 ~ ~ Python123题库 货币转换个人信息提取(控制结构&…