在最新的 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 ...
随机推荐
- MSF魔鬼训练营-3.1.2信息收集-通过搜索引擎进行信息搜集
1.Google hacking 技术 自动化的Google搜索工具 SiteDigger https://www.mcafee.com/us/downloads/free-tools/sitedig ...
- pom文件中引入依赖成功了,但是jar包找不着
编写代码的时候总是会碰到各种奇奇怪怪的问题,最近引入依赖的时候发现依赖虽然引入成功了,而且查看仓库,仓库中也存在该jar包,但是项目代码中并没有找到该jar包,重新导入reimport各种都试了还是不 ...
- 零基础学习前端1-1配置node及npm环境变量
零基础学习前端1-1配置node及npm环境变量 ## 1-1配置node及npm环境变量 首先:下载node 可以直接去官方网站下载 1.首先从官网下载安装包 https://nodejs.org/ ...
- 三校联训 小澳的葫芦(calabash) 题解
题面:小澳的葫芦[ 题目描述]小澳最喜欢的歌曲就是<葫芦娃>.一日表演唱歌,他尽了洪荒之力,唱响心中圣歌.随之,小澳进入了葫芦世界.葫芦世界有 n 个葫芦,标号为 1~ n. n 个葫芦由 ...
- 實現QQ第三方登錄
<?php // 写几个函数,分别用于获取code,token,openid,用户信息 // 跳转到QQ授权登录页面 function code(){ $response_type='code' ...
- Labeling Balls POJ - 3687 优先队列 + 反向拓扑
优先队列 + 反向拓扑 //#include<bits/stdc++.h> #include<iostream> #include<cstdio> #include ...
- 微信小程序实现滑动删除效果
在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...
- KNN-综合应用
本文代码均来自<机器学习实战> 这里讲了两个例子,datingclass 和 figureclass,用到的都是KNN,要调用这两个例子的话就在代码末尾加datingClassTest() ...
- HBASE学习笔记(二)
一.HBASE内部原理 1.hbase系统架构 上图组件介绍; 1):Client 包含访问 hbase 的接口, client 维护着一些 cache 来加快对 hbase 的访问,比如 regio ...
- 剑指offer-6:数值整数次方
一.题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 二.解题思想 分类讨论,充分考虑每种可能. exponent :0,1,& ...