1.安装依赖:

npm install less less-loader --save-dev

2.在webpack.config.js里面添加配置:(若webpack.config.js文件没有显示出来,需要执行npm run eject将项目的配置文件显示出来)

添加变量

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
 
 

在module.rules中添加以下代码:

{
test: lessRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},

配置完成后便可以在项目中使用.less文件

create-react-app 项目安装less的更多相关文章

  1. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

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

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

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

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

  4. 深入 Create React App 核心概念

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

  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. Create React App 安装less 报错

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

  8. Create React App

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

  9. 用weex create 创建app项目 报 ERROR in index.web.js from UglifyJs 错误!

    用weex create创建一个APP项目,安装依赖后运行报 这个是package.json index.web.js 在dist目录下是build时生成的. 上面的答案没有给大家细节,不好意思致歉下 ...

  10. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

随机推荐

  1. Manacher(马拉车)————O(n)回文子串

    Manacher 一.背景 1975年,Manacher发明了Manacher算法(中文名:马拉车算法),是一个可以在O(n)的复杂度中返回字符串s中最长回文子串长度的算法,十分巧妙. 让我们举个栗子 ...

  2. 「10.8」simple「数学」·walk「树上直径」

    A. Simple 本来以为很难,考场瞎推了推好像会了...... 想起小凯的诱惑,迷?? 首先$n$,$m$,$q$同除$gcd(n,m)$,显然$q$以内的数假如不是$gcd$的倍数,那么一定不能 ...

  3. Redundant Paths 分离的路径

    Redundant Paths 分离的路径 题目描述 为了从F(1≤F≤5000)个草场中的一个走到另一个,贝茜和她的同伴们有时不得不路过一些她们讨厌的可怕的树.奶牛们已经厌倦了被迫走某一条路,所以她 ...

  4. kubelet分析-csi driver注册源码分析

    kubelet注册csi driver分析 kubelet注册csi driver的相关功能代码与kubelet的pluginManager有关,所以接下来对pluginManager进行分析.分析将 ...

  5. MATLAB导入txt和excel文件技巧汇总:批量导入、单个导入

    在使用MATLAB的时候,想必各位一定会遇到导入数据的问题.如果需要导入的数据其数据量巨大的话,那么在MATLAB编辑器中将这些数据复制粘贴进来,显然会在编辑器中占据巨大的篇幅,这是不明智的. 一般来 ...

  6. 温故知新,Blazor遇见大写人民币翻译机(ChineseYuanParser),践行WebAssembly SPA的实践之路

    背景 在之前<温故知新,.Net Core遇见Blazor(FluentUI),属于未来的SPA框架>中我们已经初步了解了Blazor的相关概念,并且根据官方的指引完成了<创建我的第 ...

  7. 使用Dice loss实现清晰的边界检测

    ​ 前言: 在深度学习和计算机视觉中,人们正在努力提取特征,为各种视觉任务输出有意义的表示.在一些任务中,我们只关注对象的几何形状,而不管颜色.纹理和照明等.这就是边界检测的作用所在. 关注公众号CV ...

  8. noi 162 post office dp

    大致题意: 有v个村庄,每个村庄有各自的位置,且每个位置互不相同.现在要在村庄上设立P个邮局,使每个村庄到最近的邮局的距离之和最小. 分析: 定义状态d[i][j]表示前i个村庄,在这i个村庄中设立j ...

  9. POJ 2663 Tri Tiling dp 画图找规律

    状态:d[i]代表n=i时的方案数. 状态转移方程:d[i]=d[i-2]+2*(d[i-2]+d[i-4]+-+d[0]) i只会为偶数,奇数情况不存在,d[0]=1 找状态转移方程的时候画图更好理 ...

  10. Java Set HashSet

    import java.util.HashSet; import java.util.Set; /** Set存储特点:数据无序.不可重复 Set接口的实现类: HashSet:Set接口的主要实现类 ...