用customize-cra+react-app-rewired配置less+css module

news2024/11/19 1:40:11

1. 安装

npm i less less-loader -D
npm i customize-cra-less-loader -D

2.添加配置项

//config-overrides.js
const { override } = require('customize-cra');
const addLessLoader = require("customize-cra-less-loader");

module.exports = {
  webpack: override(
    addLessLoader({
      // strictMath: true,
      // noIeCompat: true,
      // loader: "css-loader",
      // options: {
      //   modules: {
      //     localIdentName: "[name]__[local]___[hash:base64:5]",
      //   },
      //   sourceMap: true
      // },
      // css loader options 
      cssLoaderOptions: {
        modules: {
          localIdentName: '[file]',
        }, 
      },
      // less loader options
      lessLoaderOptions: {
        lessOptions: {
          strictMath: true,
        }
      }
    }),
  )
}

// 需要下载customize-cra-less-loader,别从customize-cra直接导出,会报以下错误
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

3.启动

npm start 

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

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

相关文章

解决VS2019无法正常显示XAML设计界面问题

问题描述 当VS2019配置工程为x64模式时,打开工程中XAML页面可能出现如下错误提示,进而无法正常显示XAML设计界面。 There was an exception when loading the design time assembly C:\Users\Administrator\AppData\Local\Microsoft\VisualStudio\16.0_…

【云备份】热点管理模块

文章目录 整体思路概括热点管理实现构造函数Hotjudge ——热点判断RunModule ——运行模块 代码实现hot.hpp 整体思路概括 整体概括: 对服务器上备份的文件进行检测,那些文件长时间没有被访问,则认为是非热点文件 进行压缩存储,节…

基于UDP的网络聊天室

客户端 #include <myhead.h> //定义存储信息结构体 typedef struct _MSG {char code; //操作码&#xff1a;L表示登录C表示群聊S表示系统消息S表示退出char name[128]; char txt[256];}msg_t;//定义保存客户端网络信息的链表 typedef struct _ADDR {struct sockaddr_i…

【Springboot系列】SpringBoot整合Jpa

文章目录 前言&#xff1a;什么是JPA&#xff1f;JPA优缺点优点1.简化开发&#xff1a;2.高度抽象&#xff1a;3.跨数据库支持&#xff1a;4.自动化的事务管理&#xff1a; 缺点1.学习成本较高&#xff1a;2.性能问题&#xff1a;3.灵活性受限&#xff1a; 示例版本依赖代码Use…

VSCode 代码调试

断点调试&#xff08;debug&#xff09;&#xff1a; 指在程序的某一行设置一个断点&#xff0c;调试时&#xff0c;程序运行到这一行就会停住&#xff0c;然后你可以一步一步往下调试&#xff0c;调试过程中可以看各个变量当前的值&#xff0c;出错的话&#xff0c;调试到出错…

NSSCTF第14页(1)

[suctf 2019]checkin 利用了几种方式&#xff0c;发现都不行 1是修改mime类型&#xff0c;2是修改php标签为js标签&#xff0c;3是修改文件后缀 在试试用配置文件来上传 发现上传.user.ini文件成功 发现上传成功 上传的png图片 访问上传路径发现可以访问&#xff0c;上马成…

位运算算法【2】

文章目录 &#x1f377;371. 两整数之和&#x1f959;题目&#x1f345;算法原理&#x1f346;代码实现 &#x1f378;137. 只出现一次的数字 II&#x1f9c6;题目&#x1fad2;算法原理&#x1f954;代码实现 &#x1f379;面试题 17.19. 消失的两个数字&#x1f95a;题目&…

Android : GPS定位 获取当前位置—简单应用

示例图&#xff1a; MainActivity.java package com.example.mygpsapp;import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.core.app.ActivityCompat; import androidx.core.content.ContextCompat;import android.Manif…

burp2023专业版,配置上游代理太难找

burpsuite2023专业版的工具栏与之前的版本不同的是&#xff0c;工具栏中没有了user options这一选项 但在通常的使用过程中&#xff0c;常用到配置上游代理。之前的版本呢&#xff0c;上游代理的配置都在user options选项中设置&#xff0c;user options选项还在工具栏中&#…

小航助学题库蓝桥杯题库c++选拔赛(23年8月)(含题库教师学生账号)

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09; 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;

【JS Promise, Promise.all 与 async/await用法详解】

目录 PromisePromise基本使用Promise可进行连续回调Promise回调可接受入参1.工作原理 async/await总结参考文档&#xff1a; 异步 let a 0setTimeout(() > {a 1}, 1000)console.log(a) // 0此时这个延迟就成为异步执行的了&#xff0c;a值还没有变1就被使用输出&#xff0…

【产品经理】AI在SaaS产品中的应用及挑战

随着ChatGPT大模型在全球的爆火&#xff0c;AI迅速在各个行业内&#xff0c;助力于各行业的效率提升。而SaaS领域&#xff0c;AI同样也大有可为。 AI&#xff08;人工智能&#xff0c;Artificial Intelligence的缩写&#xff09;近一年来一直处于舆论风口&#xff0c;随着ChatG…

NX二次开发UF_CURVE_create_bridge_feature 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_create_bridge_feature Defined in: uf_curve.h int UF_CURVE_create_bridge_feature(UF_CURVE_bridge_data_p_t bridge_data, tag_p_t bridge_feature ) overview 概述 …

在零信任架构下的API安全与滥用防护(上)

引言 在当今数字化的浪潮中&#xff0c;应用程序编程接口&#xff08;API&#xff09;的战略重要性愈发凸显。API不仅仅是现代软件和互联网服务之间沟通的桥梁&#xff0c;更是企业价值创造的核心。随着API的快速发展和广泛应用&#xff0c;安全问题随之而来&#xff0c;其中A…

保障海外业务发展,Coremail提供高效安全的海外通邮服务

11月22日&#xff0c;Coremail举办《全球通邮&#xff1a;如何保障安全、快捷的海外中继服务》直播分享会&#xff0c;直播会上Coremail安全团队和直播嘉宾复旦大学校园信息化办公室徐艺扬老师就海外中继服务进行了深度分享。 ​ 海外通邮困难重重 境外垃圾邮件数量居高不下…

【Spring Boot 源码学习】BootstrapRegistryInitializer 详解

Spring Boot 源码学习系列 BootstrapRegistryInitializer 详解 引言往期内容主要内容1. 初识 BootstrapRegistryInitializer2. 加载 BootstrapRegistryInitializer3. BootstrapRegistryInitializer 的初始化 总结 引言 书接前文《初识 SpringApplication》&#xff0c;我们从 …

【动态规划】LeetCode2552:优化了6版的1324模式

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 动态规划 本题其它解法 C前缀和算法的应用&#xff1a;统计上升四元组 类似题解法 包括题目及代码C二分查找算法&#xff1a;132 模式解法一枚举3C二分查找算法&am…

通用plantuml模板头

通用plantuml文件 startuml participant Admin order 0 #87CEFA // 参与者、顺序、颜色 participant Student order 1 #87CEFA participant Teacher order 2 #87CEFA participant TestPlayer order 3 #87CEFA participant Class order 4 #87CEFA participant Subject order …

logcat日志的使用——Qt For Android

前言 最近一直用qt开发安卓app&#xff0c;一直无法用真机调试&#xff0c;可能是缺什么东西。但是如果通过Qt Creator在真机上运行&#xff0c;可以在电脑控制台看打印&#xff08;安卓本身的日志、qDebug之类的打印&#xff09;&#xff0c;所以我是通过打印猜测问题所在&am…

autojs-ui悬浮按钮模板

注释很详细&#xff0c;直接上代码 涵盖很多常用知识点&#xff0c;也可当知识点看 运行效果长这样&#xff1a; 开始按钮相当于开关&#xff0c;按钮内容会随点击变换控制台按钮可让运行框显示或隐藏退出按钮退出程序并在3s后关闭运行框只需在对应函数内添加需要实现的内容即可…