在最新的 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 ...
随机推荐
- 第七周课程总结&实验报考(五)
第七周课程总结&实验报考(五) 实验四 类的继承 实验目的: 1.理解抽象类与接口的使用: 2.了解包的作用,掌握包的设计方法. 实验要求: 1.掌握使用抽象类的方法. 2.掌握使用系统接口的 ...
- NPM和webpack的关系(转载)
NPM和webpack的关系(转载):https://blog.csdn.net/cwh0908/article/details/90769823 NPM和webpack的关系(转载) 入门前端的坑也 ...
- POJ 3585 Accumulation Degree 题解
题面 一句话题意:找一个点使得,使得从这个点出发作为源点,发出的流量最大,输出这个最大的流量 这道题是换根法+二次扫描的模板: 首先若确定1为原点,那么可以写出dp方程:当v的度是1时, g[u]+= ...
- C++ Primer: 1. 初识输入和输出
C++没有定义任何的输入和输出语句,而是使用了 标准库来提供IO机制---iostream; 标准库iostream定义了4种不同的IO对象: cin: 标准输入对象:instream类型的对 ...
- 直线的Bresenham算法
在实验课上用自己的算法画直线被diss效率低 花了半天时间看了下Bresenham算法真
- HNUST-1047 二叉树的表示
1047: 二叉树的表示 时间限制: 1 Sec 内存限制: 128 MB提交: 4 解决: 4[提交][状态][讨论版] 题目描述 DJ非常痴迷于数据结构,二叉树是他最喜欢的结构模型.这种每个 ...
- html获取摄像头和相册
<input type="file" accept="video/*";capture="camcorder"> <inp ...
- vnd.ms-excel.numberformat 导出Ecxel 格式
<td style="vnd.ms-excel.numberformat:@;"><s:property value="accountCode" ...
- java 过滤器filter使用案例
主要需要 过滤器类 和配置文件 1.过滤器类 SessionFilter package com.service; import javax.servlet.*; import javax.serv ...
- A Magic Lamp HDU - 3183 (逆向贪心/RMQ)
Kiki likes traveling. One day she finds a magic lamp, unfortunately the genie in the lamp is not so ...