前置知识:

把 webpack 的相关配置暴露出来

0. 运行 git add -A

  1. 运行 git commit -m 'project init'
  2. 运行 yarn eject 然后选 y
  3. 项目中多出来两个文件夹 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 支持的更多相关文章

  1. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  2. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  3. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  4. 在iOS App 中添加启动画面

    你可以认为你需要为启动画面编写代码,然而Apple 让你可以非常简单地在Xcode中完成.不需要编写代码,你仅需要在Xcode中进行一些配置. 1.什么是启动画面(Splash Screen)? 启动 ...

  5. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  6. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  7. 在IntelliJ IDEA中添加框架支持时找不到Hibernate的解决办法

    问题描述 第一次在Add Frameworks support界面中添加hibernate支持的时候,异常中断,导致没有成功添加. 第二次进入Add Frameworks support窗口时,发现找 ...

  8. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  9. 在React项目中添加ESLint

    1. 安装eslint npm install eslint --save-dev // 或者 yarn add eslint --dev 2. 初始化配置文件 npx eslint --init / ...

  10. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

随机推荐

  1. 2019JAVA第三次实验报告

    Java实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019.9.24 评分等级 实验三 String类的应用 一.实验目的 掌握类String类的使用: 学会使用JDK ...

  2. Solrcloud单机伪集群部署

    线上有一套双节点的Solrcloud节点,因机器性能较老,环境搭建于2013年,原节点有数百个已经被unload的collections,考虑以后可能还会需要,所以搭建一套和原节点相同的solrclo ...

  3. mysql8无法用navicat连接(mysql8加密方式的坑)

    关键词:mysql8无法用navicat连接,navicat无法连接mysql8,mysql8,mysql8的加密方式 [1]mysql8 的坑 密码加密规则 在MySQL 8.0.以上版本中,cac ...

  4. emmet语法列表

    emmet语法  来源:https://docs.emmet.io/cheat-sheet/ Child: > nav>ul>li <nav> <ul> &l ...

  5. python中魔法方法__str__与__repr__的区别

    提出问题 当我们自定义一个类时,打印这个类对象或者在交互模式下直接输入这个类对象按回车,默认显示出来的信息好像用处不大.如下所示 In [1]: class People: ...: def __in ...

  6. javaweb:关于HttpServletResponse介绍 (转)

    出处: https://www.cnblogs.com/xdp-gacl/p/3789624.html Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request ...

  7. ckfinder的使用

    引入<script type="text/javascript" src="${ctxStatic}/ckfinder/ckfinder.js">& ...

  8. Vue.nextTick 的原理和用途

    转载自https://segmentfault.com/a/1190000012861862 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法 ...

  9. INSERT - 在表中创建新行

    SYNOPSIS INSERT INTO table [ ( column [, ...] ) ] { DEFAULT VALUES | VALUES ( { expression | DEFAULT ...

  10. java内存区域及溢出异常

    内存划分: java虚拟机在执行java程序过程中会把内存分为以下区域进行管理 线程私有的 虚拟机栈 局部变量表 基本数据类型 long和double占用两个slot 对象引用 返回地址 操作数栈 动 ...