在最新的 create-react-app 中添加 less 支持
前置知识:
把 webpack 的相关配置暴露出来
0. 运行 git add -A
- 运行 git commit -m 'project init'
- 运行 yarn eject 然后选 y
- 项目中多出来两个文件夹 config 和 scripts
在 config 文件夹中找到 webpack.config.js 文件如下图:

在 webpack.config.js 中书写如下配置:

把 sass 的配置复制一份, 把名字改成上一步书写的 less 配置,把 sass-loader 改成 less-loader,其余相同。
安装 less 和 less-loader 包即可(切记两个都需要安装)
npm install less less-loader
安装完成后就可以开心的使用 less 来写样式
打包上线的代码一样有效不用担心,亲测有效。
本文完。。。
在最新的 create-react-app 中添加 less 支持的更多相关文章
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在iOS App 中添加启动画面
你可以认为你需要为启动画面编写代码,然而Apple 让你可以非常简单地在Xcode中完成.不需要编写代码,你仅需要在Xcode中进行一些配置. 1.什么是启动画面(Splash Screen)? 启动 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 在IntelliJ IDEA中添加框架支持时找不到Hibernate的解决办法
问题描述 第一次在Add Frameworks support界面中添加hibernate支持的时候,异常中断,导致没有成功添加. 第二次进入Add Frameworks support窗口时,发现找 ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- 在React项目中添加ESLint
1. 安装eslint npm install eslint --save-dev // 或者 yarn add eslint --dev 2. 初始化配置文件 npx eslint --init / ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
随机推荐
- 浅析射线检测 raycast 的使用 !Cocos Creator 3D !
哎呀?为什么我设置了节点点击回调没反应呀? 记得在写小鸡拍拍的时候遇到一个问题,想要捕捉排球的点击事件,按照 2d 的写法,给3d 节点添加 node 事件,结果点了没反应.代码大概是以下的样子. t ...
- poj1220(短除法实现任意进制转换)
题目链接:https://vjudge.net/problem/POJ-1220 题意:给定a进制的大数s,将其转换为b进制.其中2<=a,b<=62. 题意:一般进制转换是以10进制为中 ...
- Nmap Windows 版本时区显示乱码
Nmap 版本 $ nmap --version Nmap version 7.80 ( https://nmap.org ) Platform: i686-pc-windows-windows Co ...
- spring boot1.1 idea + springboot + mybatis(mybatis-generator) +mysql +html实现简单的登录注册
前言 这两年springboot比较火,而我平时的工作中不怎么使用spring boot,所以工作之余就自己写写项目练练手,也跟大家一起学习. 打算从最开始的搭架子,登录注册,到后台管理的增删改查,业 ...
- 洛谷P1029 最大公约数和最小公倍数问题 (简单数学题)
一直懒的写博客,直到感觉不写不总结没有半点进步,最后快乐(逼着)自己来记录蒟蒻被学弟学妹打压这一年吧... 题目描述 输入22个正整数x_0,y_0(2 \le x_0<100000,2 \le ...
- Qt两个类通过信号槽通信
qt需要通过信号槽来通信,connect的时候总是返回false,请教了公司的一个小哥,才解决了问题,虽然是个很白痴的问题. bool b = QObject::connect(m_pCollectO ...
- P5596 洛谷月赛 题 题解
因为a>=0,b>=0,所以y^2-x^2>=0,所以y>x,因为都是自然数设y=x+k,化简得x=b-k^2/2*k-a;可知x仅当b-k^2%2*k-a==0且b-k^2与 ...
- html中的锚点设置
html中的锚点 一.页面内跳转的锚点设置 页面内的跳转需要两步: 方法一: ①:设置一个锚点链接去找喵星人:(注意:href属性的属性值最前面要加#) ②:在页面中需要的位置设置锚点<a na ...
- selenium之京东商品爬虫
#今日目标 **selenium之京东商品爬虫** 自动打开京东首页,并输入你要搜索的东西,进入界面进行爬取信息 ``` from selenium import webdriver import t ...
- 微信小程序 报错 “对应的服务器无效。控制台输入 showRequestInfo()可以获取更详细信息”
之前做的项目突然无法读出数据了,一测试发现报这个错误==>对应的服务器无效.控制台输入 showRequestInfo()可以获取更详细信息,后来发现是SSL证书到期了.重新申请了一个证书,免费 ...