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. PTA题目集4-6总结

    PTA题目集4-6总结 一:前言 在题集4-6中,所考查的主要知识点有正则表达式,类与类之间的调用,类的聚合,继承,封装,接口与多态,三种排序方法如选择排序,冒泡排序,插入排序,ArrayList,s ...

  2. 孟老板 ListAdapter封装, 告别Adapter代码 (四)

    BaseAdapter系列 ListAdapter封装, 告别Adapter代码 (一) ListAdapter封装, 告别Adapter代码 (二) ListAdapter封装, 告别Adapter ...

  3. mybatis-generator的使用心得

    之前开发了一个亚健康测评系统,使用的是SSM框架,里面第一次使用到了mybatis-generator逆向代码生成工具,很方便,省去了基本的增删改查的mapper文件及sql的编写,还能避免错误,这里 ...

  4. 手摸手,带你用Beego撸商城系列一(基础篇)

    完整项目地址: go-shop-b2c 系列文章: 手摸手,带你用 Beego撸商城 系列一(基础篇) 手摸手,带你用 Beego撸商城 系列二(登录篇) 手摸手,带你用 Beego撸商城 系列三(系 ...

  5. Unity VideoPlayer视频模糊

    如果视频出现模糊或者尺寸不对只需要修改Texture的Size就可以 注意一点  Size的值要跟视频尺寸一直

  6. Linux文件编辑工具——VIM

    Linux文件编辑工具--VIM 1.VIM基本概述 1.1 什么是vim vi 和 vim 是 Linux 下的一个文本编辑工具.(可以理解为 windows 的记事本,或 Notepad++ 1. ...

  7. 使用RSA和DES保护的Socket通信

    基本要求:将DES加密算法应用于网络通信,使用RSA算法自动分配密钥,设计好界面,可验证自动生成的密钥和加解密正确的结果. 具体实现要求:客户端和服务器建立连接后,客户端生成一个随机DES密钥;服务器 ...

  8. CentOS-yum安装Redis(单点)

    源文件安装(推荐安装) 在CentOS系统中,首先安装EPEL仓库,然后更新yum源: $ yum install epel-release -y $ yum update -y 然后安装Redis数 ...

  9. APDU:APDU常用指令

    APDU= ApplicationProtocol data unit, 是智能卡与智能卡读卡器之间传送的信息单元, (给智能卡发送的命令)指令(ISO 7816-4规范有定义) CLA INS P1 ...

  10. PV操作的概念

    PV操作:一种实现进程互斥与同步的有效方法,包含P操作与V操作. P操作:使 S=S-1 ,若 S>=0 ,则该进程继续执行,否则排入等待队列. V操作:使 S=S+1 ,若 S>0 ,唤 ...