react v18 less使用(craco)

devtools/2024/12/22 15:02:51/

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

  • 安装依赖: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/devtools/58179.html

相关文章

PostgreSQL 如何优化存储过程的执行效率?

文章目录 一、查询优化1. 正确使用索引2. 避免不必要的全表扫描3. 使用合适的连接方式4. 优化子查询 二、参数传递1. 避免传递大对象2. 参数类型匹配 三、减少数据量处理1. 限制返回结果集2. 提前筛选数据 四、优化逻辑结构1. 分解复杂的存储过程2. 避免过度使用游标 五、事务处…

面试知识点【java基础篇】

1、一个程序有且仅有一个main方法启动,main方法是作为java程序启动的唯一入口。 public static void main(String[] args) {Student student new Student(11,"111");System.out.println(student);} 权限修饰符:public:修饰一个类是公开的 pub…

Knife4j的原理及应用详解(一)

本系列文章简介: 在当今快速发展的软件开发领域,API(Application Programming Interface,应用程序编程接口)作为不同软件应用之间通信的桥梁,其重要性日益凸显。随着微服务架构的兴起,API的数量…

论文引用h指数

文章目录 1、描述2、关键字3、思路4、notes5、复杂度6、code 1、描述 给你一个整数数组 citations ,其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义:h 代表“高引用次数” &…

AI和人工智能是啥关系?

AI(人工智能)与通用人工智能(AGI)是人工智能领域中的两个重要概念,它们在定义、技术基础以及应用领域等方面有所区别。人工智能(AI),是指使计算机和其他机器模拟人类智能的技术&…

Python面试题:如何在 Python 中实现单例模式?

在 Python 中,有多种方法可以实现单例模式(Singleton Pattern)。单例模式是一种设计模式,确保一个类只有一个实例,并提供一个全局访问点。以下是几种常见的方法来实现单例模式: 方法一:使用类变…

鸿蒙开发HarmonyOS NEXT (三) 熟悉ArkTs (上)

一、自定义组件 1、自定义组件 自定义组件,最基础的结构如下: Component struct Header {build() {} } 提取头部标题部分的代码,写成自定义组件。 1、新建ArkTs文件,把Header内容写好。 2、在需要用到的地方,导入…

校园在校跑腿小程序源码系统 前后完全分离 带源代码包以及搭建教程

系统概述 随着移动互联网的飞速发展,校园生活也迎来了前所未有的便捷与高效。在校园内,学生们对于便捷服务的需求日益增长,从取快递、送餐到代买日常用品,各类跑腿服务逐渐成为校园生活的常态。为了满足这一市场需求,…