create-react-app中配置支持less

news/2024/10/30 17:23:09/

这玩意确实挺好 但如果想开发一个完整的项目 很多配置都得自己来搞
相当于从零开始了

直接比较复杂的项目 还是基于umi进行开发吧

比如项目中我想配置使用less 都得让我自己去搞着配置webpack
有的博客可能让你直接运行 npm run eject让后暴露出来webpack的配置文件 然后在里面更改

不是上面的那种哈 是另一种方式 就是使用 @craco/craco

pnpm add @craco/craco -D
or
npm i @craco/craco -D

这玩意介绍下哈
craco是一个用于在create-react-app项目中覆盖webpack配置的包。它允许您在不弹出的情况下修改webpack配置。通过使用craco,您可以修改webpack配置以添加加载器、插件和其他自定义内容。
然后启动的一些 script脚本命令就需要更改下了

// 在package.json文件中 react-scripts -> craco 需要更改下

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

你覆盖人家create-react-app中的默认webpack配置 那么你也得需要一个配置文件了
在package.json同级别目录下 创建一个 craco.config.js文件

还得安装less编译需要的东西

pnpm add less less-loader -D

然后呢

// craco.config.js

const path = require('path');module.exports = function ({ webpackConfig }) {// Add the LESS loaderwebpackConfig.module.rules.push({test: /\.less$/,use: ['style-loader','css-loader','less-loader'],include: path.resolve(__dirname, 'src'),});return webpackConfig;
};

完成之后 我们在App.js or App.ts中引入一个 test.less

配置完成后 记得重新启动项目哦 npm start

bingo 然后发现是不是 没生效 是不是很嘛呢
其实吧 上面的配置方法 可能都不会生肖 如果你的版本比较低的话
webpack 和 @craco/craco 那你就换一种写法 去官网看下 最新的配置方法

const path = require('path');
module.exports = {webpack: {configure: (webpackConfig) => {webpackConfig.module.rules.push({test: /\.less$/,use: ['style-loader','css-loader','less-loader'],include: path.resolve(__dirname, 'src'),});console.log(webpackConfig.module.rules, 'rules')return webpackConfig}}}

然后再重启 npm start
。。。。。
是不是发现还没有生效 气死人了
郁闷了半天 是哪里出了问题 然后就闲着没事 在官网一顿乱逛
发现了一个有意思的插件

craco-less
pnpm add craco-less -D

然后去看了下配置

const CracoLessPlugin = require("craco-less");
module.exports = {plugins: [{ plugin: CracoLessPlugin }],
}

重启 npm start
发现生效了
很神奇
当然这玩意里面也支持 你去更改less-loader的options

module.exports = {plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {modifyVars: {"@primary-color": "#1DA57A","@link-color": "#1DA57A","@border-radius-base": "2px",},javascriptEnabled: true,},},},},],
};

比如你要做的是 ant的主题定制 等
这个你就可以了解了

关注我 持续更新 前端知识


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

相关文章

【算法专题】多项式运算与生成函数

【快速傅里叶变换】FFT 参考:从多项式乘法到快速傅里叶变换 by miskcoo FFT 学习笔记 by Menci (一)多项式的表示法 系数表示法:f(x)a[n-1]*x^(n-1)...a[0],称为n-1次多项式。 点值表示法:一个n-1次多项式在…

selenium 总结篇,常见方法和页面元素的操作

selenium 总结篇,常见方法和页面元素的操作 今天,总结一下selenium怎么操作web页面常见的元素。 主要有: 上传alter dialogprompt dialogconfirm dialogselect listradio boxinput boxcheckBox 测试页面如下: View Code selenium …

清北学堂培训2019.4.28

Day 1(冯哲) 今天的内容很杂但却都是基础知识 主要分为下面几个点 枚举 枚举也称作穷举,指的是从问题所有可能的解的集合中一一枚举各元素。用题目中给定的检验条件判定哪些是无用的,哪些是有用的。能使命题成立的即为其解。 有几…

0x35.数论 - 组合数学与计数

目录 一、计数原理1.加法原理2.乘法原理3.减法原理 二、排列组合1.排列数2.组合数3.数学题 三、组合数的计算1. 加法递推 O ( n 2 ) O(n^2) O(n2)2. 乘法递推 O ( n ) O(n) O(n)3. Lucas定理4. 扩展卢卡斯5. 大组合数(高精)6. 生成全排列7.枚举子集 四 、…

五一清北学堂培训之数据结构(Day 1Day 2)

Day 1 前置知识: 二进制 2.基本语法 3.时间复杂度 正片 1.枚举 洛谷P1046陶陶摘苹果 入门题没什么好说的 判断素数:从2枚举到sqrt(n),若出现n的因子,则n是合数 因为数据范围比较小,所以直接欧拉筛,再判定在l~r区间内…

Java基础1

目录 1.数据类型分类1.1 基本数据类型【今天重点】1.2 引用数据类型(今后学习)1.3 注意事项 2. 数据类型转换2.1 自动数据类型转换(隐式)2.2 强制数据类型转换(显式)2.3 字母和汉字的转换 3. 运算符3.1 四则运算符3.2 四则运算中的 (加号)3.3 自增加.减少…

常用代码笔记-持续更新

一&#xff0c;蛇型排n格图精灵 //LatticeImage -(void)LatticeImage:(NSArray *)imageArray_ firstImagePoint:(CGPoint) firstImagePoint_ ColumnStep:(float)ColumnStep_ LineStep:(float)linestep_{for(int i0; i<imageArray_.count;i) {NSString* image[imageArray_ ob…

Linux-Day01_简介_安装_常用命令_虚拟机快照_静态ip

Linux-Day01 课程内容 Linux简介Linux安装Linux常用命令 1. 前言 1.1 什么是Linux Linux是一套免费使用和自由传播的操作系统。说到操作系统&#xff0c;大家比较熟知的应该就是Windows和MacOS操作系统&#xff0c;我们今天所学习的Linux也是一款操作系统。 1.2 为什么要学…