//安装less less less-loader
npm install less less-loader --save-dev

安装完成后,在项目中的config目录下找到webpack.config.js文件(说明:新建项目一般默认不显示config目录的,需要执行npm run eject)

//在文件中,找到以下代码
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/; //在这里添加less正则
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

最后加入如下代码:

 {
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},

react 配置使用less后缀文件的更多相关文章

  1. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  2. React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...

  3. LNMP-Nginx配置不记录静态文件、过期时间

    用户访问web网站,通常日志文件会记录很多web站点上的一些静态文件信息,如果长期不处理,日志文件会越来越大,占用的系统资源也越大,此时就需要我们配置不记录静态文件和过期时间,减少日志文件记录过多不必 ...

  4. 配置apue的头文件apue.h和unp的头文件anp.h

    配置apue的头文件apue.h和unp的头文件anp.h 如果要使用gcc -g 来生成可调试文件一定要修改Make.defines.linux文件中的CFLAGS变量 修改为:CFLAGS=-an ...

  5. 【转】【Raspberry Pi】Unix NetWork Programming:配置unp.h头文件环境

    一.初衷 近期正在做网络计算编程的作业.要求平台为unix/linux,想着Raspberry Pi装的Debian系统也是Linux改的,也应该能够勉强用着,所以就用它来做作业了! 二.说明 先把环 ...

  6. Window 注册程序关联后缀文件,双击运行

    一般来说,很多软件都会有自定义后缀的文件,比如.cpp..doc等,那么如果我们想把这些后缀与我们的软件关联起来,如何做呢 #pragma once #include "StdAfx.h&q ...

  7. 配置内存中OLTP文件组提高性能

    在今天的文章里,我想谈下使用内存中OLTP的内存优化文件组来获得持久性,还有如何配置它来获得高性能.在进入正题前,我想简单介绍下使用你数据库里这个特定文件组,内存OLTP是如何获得持久性的. 内存中O ...

  8. IIS:错误: 无法提交配置更改,因为文件已在磁盘上更改

    文件名: \\?\C:\Windows\system32\inetsrv\config\applicationHost.config 错误: 无法提交配置更改,因为文件已在磁盘上更改 通过 Micro ...

  9. PHPStudy+PHPStorm下配置隐藏项目入口文件

    img { max-width: 100% } 默认情况下项目入口文件是站点根目录下index.php文件,一般程序启动时通过这个文件,定义文件路径,配置重要节点(比如是否开启调试模式),注册路由等, ...

随机推荐

  1. react hooks 如何自定义组件(react函数组件的封装)

    前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...

  2. <学习opencv>跨平台和本机windows

    /*=========================================================================*/ // 跨平台和本机Windows /*=== ...

  3. 在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...

  4. Android开发案例 点击按钮出现 简易的消息提示框

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  5. Debug解决问题方法论

    发现问题怎么办,如何处理, 所谓的Debug的一般流程是什么, 下面是我对此的一些思考总结, 后面还会继续完善补充. 1.处理思路总纲 发现问题 查看日志 没有日志,去找日志 找不到日志,继续找,有些 ...

  6. uniapp页面跳转传递参数过长

    传参 url:'./photo_detail?item='+encodeURIComponent(JSON.stringify(obj)) 取参 const item = JSON.parse(dec ...

  7. 用jquery实现省市联动

    <!-- 需求: [1] 动态生成省份选择框. [2] 当选择了省份的某一项时, 动态改变 城市选择中的列表项. --> <!DOCTYPE html> <html la ...

  8. 论文翻译:2020_RESIDUAL ACOUSTIC ECHO SUPPRESSION BASED ON EFFICIENT MULTI-TASK CONVOLUTIONAL NEURAL NETWORK

    论文翻译:https://arxiv.53yu.com/abs/2009.13931 基于高效多任务卷积神经网络的残余回声抑制 摘要 在语音通信系统中,回声会降低用户体验,需要对其进行彻底抑制.提出了 ...

  9. [BZOJ2761] [JLOI2011] 不重复数字 (C++ STL - set)

    不重复数字 题目:         给出N个数,要求把其中重复的去掉,只保留第一次出现的数.例如,给出的数 为1 2 18 3 3 19 2 3 6 5 4,其中2和3有重复,去除后的结果为1 2 1 ...

  10. CTF中的变量覆盖问题

    0x00 前言 最近在干代码审计,于是就把之前学习的CTF题目中有关变量覆盖的题目结合下进一步研究. 通常将可以用自定义的参数值替换原有变量值的情况称为变量覆盖漏洞.经常导致变量覆盖漏洞场景有:$$使 ...