//安装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. python学习第二天:命令行模式和python交互模式

    命令行模式 安装完python开发环境和工具之后,在Windows开始菜单选择"命令提示符",就会进入到命令行模式: 或者都可以,然后 点击enter键,弹出下图中的窗口,即命令行 ...

  2. Laravel 使用 maatwebsite/excel 时长数字出现科学计数法的解决办法

    在使用 maatwebsite/excel 包导出Excel的时候,有的单元格里会存放手机号等一大串的数字,这一串数字会被Excel软件处理为科学计数法,在后续处理数据的时候会产生不小的麻烦,一个个去 ...

  3. CS5210完全替代AG6202|HDMI转VGA不带音频输出的芯片+原理图|替代兼容AG6202

    CS5210完全替代AG6202|HDMI转VGA不带音频输出的芯片+原理图|替代兼容AG6202 安格AG6202是一个HDMI转VGA不带音频解决方案,用于实现HDMI1.4高分辨率视频转VGA转 ...

  4. 【jvm】09-full gc分析思路

    [jvm]09-full gc分析思路 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请顺手点个赞. ...

  5. AVD Pixel_2_API_30 is already running. lf that is not the case, delete the files at

    AVD Pixel_2_API_30 is already running. lf that is not the case, delete the files at C:\Users\Adminis ...

  6. IIS部署.net core项目

    1.安装AspNetCoreModule模块 与ASP.NET时代不同,ASP.NET Core不再是由IIS工作进程(w3wp.exe)托管,而是使用自托管Web服务器(Kestrel)运行,中间最 ...

  7. 2.HTML5基本标签

    一.标题标签  h1-->h6 h1最大 h6最小   <body>   <h1>一级标题</h1>   <h2>二级标题</h2> ...

  8. centos6.5搭建Apache-虚拟主机

    一.配置基于域名的虚拟用户 1.创建虚拟用户的网页根目录 cd /usr/local/httpd/htdocs/ mkdir benetcom cd benetcom echo "<h ...

  9. Spring循环依赖原理

    Spring循环依赖的原理解析 1.什么是循环依赖? ​ 我们使用Spring的时候,在一个对象中注入另一个对象,但是另外的一个对象中也包含该对象.如图: 在Student中包含了teacher的一个 ...

  10. 论文翻译:2019_TCNN: Temporal convolutional neural network for real-time speech enhancement in the time domain

    论文地址:TCNN:时域卷积神经网络用于实时语音增强 论文代码:https://github.com/LXP-Never/TCNN(非官方复现) 引用格式:Pandey A, Wang D L. TC ...