在react中配置less

第一步:暴露出webpack配置文件

终端命令:npm run eject (此命令一旦运行不可逆)

第二步:安装less以及less-loader

npm install less less-loader --save-dev

第三步:修改webpack的配置文件

运行完以上命令后,项目根目录下会多出一个 config 文件夹,找到里面的 webpack.config.js 这个文件

 第四步:增加less配置

 

const lessRegex = /\.less$/; 
const lessModuleRegex = /\.module\.less$/;

全局搜索oneOf,在oneOf数组中添加以下代码:

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

这样就配置完成,可以直接使用less了。

通过模块的方式引入 import styles from "./index.module.less";
直接引入 import "./index.less";

 参考地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/6638.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

精通自动化,Pytest自动化测试框架-fixture用例的前后置(实现)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 测试用例实现前后…

crmeb部署

安装宝塔 教程 安装所需要的软件 php mysql5.7 redis fileinfo nginx 安装crmeb 重启mysql 前台http://192.168.216.128/ 后台http://192.168.216.128/admin admin admin888登录 访问前台

自动化运维工具--saltstack部署及使用

目录 一、saltstack简介 1、介绍 2、Salt的核心功能 3、saltstack通信机制 二、saltstack部署 1、部署环境 2、配置yum源 3、安装master与minion 4、连接认证master和minion 三、salt运行 1、执行格式 2、实操演示 一、saltstack简介 1、介绍 saltstack是一个配置管…

连锁反应开始了!Linux 发行版迎新变化!

任何企业都有合法权利捍卫其模型和产品。撇开大量不真正了解开源许可证如何工作的人不谈,我们的印象是,有很多人觉得仅仅因为这是Linux,他们就有某种权利免费获得它。但事实上,他们没有。这不是自由软件中的“自由”的意思&#x…

浮点型在内存中的存储

目录 1.浮点数是什么? 2. 浮点数存储规则 1.浮点数是什么? 就是数学中的小数。 常见的浮点数: 3.14159 1E10(1*10^10) 浮点数家族包括: float、double、long double 类型。 浮点数表示的范围&#x…

前端 | ( 十二)CSS3简介及基本语法(中)| 变换、过渡与动画 | 尚硅谷前端html+css零基础教程2023最新

学习来源:尚硅谷前端htmlcss零基础教程,2023最新前端开发html5css3视频 系列笔记: 【HTML4】(一)前端简介【HTML4】(二)各种各样的常用标签【HTML4】(三)表单及HTML4收尾…

【C++基础(六)】类和对象(中) --构造,析构函数

💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:C初阶之路⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你学习C   🔝🔝 类和对象-中 1. 前言2. 构造函数3. 构造函数的特性4…

分布式系统的应用程序性能监视工具-skywalking

分布式系统的应用程序性能监视工具,专为微服务、云原生架构和基于容器(Docker、K8s、Mesos)架构而设计。提供分布式链路日志追踪、剖析、服务网格遥测分析、度量聚合和可视化一体化解决方案。 在应用系统进行实时监控,实现对应用性能管理和故障定位的系统化解决方案中常用的…

爬虫小白-如何辨别是否有cookie反爬案例

目录 一、Cookie介绍二、cookie生成来源区分查找三、如何判断是否有cookie反爬四、来自服务器生成的cookie反爬解决方法五、来自js生成的cookie反爬解决方法 一、Cookie介绍 先推荐该篇文章简单了解Cookie、Session、Token、JWT1、cookie的类型:会话cookie和持久co…

[驱动开发]字符设备驱动应用——点灯

点亮开发板stm32mp157的三盏灯 //头文件 #ifndef __LED_H__ #define __LED_H__//封装GPIO寄存器 typedef struct { volatile unsigned int MODER; // 0x00volatile unsigned int OTYPER; // 0x04volatile unsign…

Linux Day01

目录 一、Linux终端介绍 二、Linux目录介绍 1.目录结构 2.常见目录说明 3.绝对路径与相对路径 4.家目录 一、Linux终端介绍 二、Linux目录介绍 Linux目录:是从根目录"/"开始的 是一棵倒着的树 1.目录结构 2.常见目录说明 目前记住 bin 存放常用命…

跨境独立站如何应对恶意网络爬虫?

目录 跨境出海独立站纷纷成立 爬虫威胁跨境电商生存 如何有效识别爬虫? 技术反爬方案 防爬虫才能保发展 中国出海跨境电商业务,主要选择大平台开设店铺,例如,亚马逊、eBay、Walmart、AliExpress、Zalando等。随着业务的扩大&…

使用springboot进行后端开发100问

properties和yaml文件怎么互转 安装插件 properties文件和yaml文件区别 properties 文件通过“.”和“”赋值,值前不加空格,yaml通过“:”赋值,值前面加一个空格;yaml文件缩进用空格; properties只支持键值对&#x…

Ubuntu下打开QtCreator环境变量LD_LIBRARY_PATH与终端不一致

问题描述: 在unbuntu下使用QtCreator编译、运行程序时,总是出现XXX.so: cannot open shared object file: No such file or directory这类问题,但是在终端中编译或者运行程序则不会出现这些问题。在网上查了好久才明白QtCreator在打开时&…

逻辑漏洞原理及实战

前言 作者简介:不知名白帽,网络安全学习者。 博客主页:不知名白帽_网络安全,CTF,内网渗透-CSDN博客 网络安全交流社区:https://bbs.csdn.net/forums/angluoanquan 目录 逻辑漏洞基础 概述 分类 URL跳转漏洞 概述 危害 漏洞…

51单片机串口

该部分的笔记来自视频教程链接https://www.bilibili.com/video/BV1bt4y197NR/?spm_id_from333.788&vd_sourceb91967c499b23106586d7aa35af46413 一、51单片机串口基础介绍 一般的应用层的协议中采用和校验或CRC校验,而奇偶校验还是解决基本通信中的帧格式中的…

Eclipse整合tomcat时要注意的几点

Eclipse整合tomcat时要注意的几点 1、安装目录及jdk 2、参数配置 注意:Arguments的配置,日志输出文件目录及java内存大小设置等,如下: -Dcatalina.base"E:\apache-tomcat-7.0.52" -Dcatalina.home"E:\apache-tomc…

无符号数和有符号数的“bug”

1. 起因 在实现kmp算法时&#xff0c;出现了诡异的现象&#xff0c;看下面的代码&#xff1a; int KMP (const char *s, const char *t) {int lenS strlen (s);int lenT strlen (t);int next[lenT];get_next (next, t);int i 0;int j 0;while (i < lenS && j …

程序化广告还有未来么?——程序化领域变化的底层逻辑和反思

三、近几年程序化广告领域的变化底层逻辑是什么呢&#xff1f; 当前国内程序化生态的状态&#xff0c;更像是希腊的古典时代&#xff1a;古希腊时代的城邦高度繁荣的时期。很多人可能对古希腊城邦没有概念&#xff0c;我们解释一下&#xff1a; 所谓城邦就是城市国家&#xff0…

涵子来信——自己的电脑——谈谈想法

大家好&#xff1a; 上一次谈论了苹果的那些事&#xff0c;今天我们来聊聊电脑。 我的第一台电脑现在成了这样子&#xff1a; 很多人以为是我自己拆了电脑做研究&#xff0c;其实是我的第一台电脑&#xff0c;真的坏了。 2021年&#xff0c;我有了属于我自己的第一台电脑&am…