//安装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. Codeforces 888D: Almost Identity Permutations(错排公式,组合数)

    A permutation \(p\) of size \(n\) is an array such that every integer from \(1\) to \(n\) occurs exa ...

  2. ZOJ 3778:Talented Chef(贪心?思维)

    Talented Chef Time Limit: 2 Seconds Memory Limit: 65536 KB As we all know, Coach Gao is a talented c ...

  3. [c++]对vector<T>容器求交集,并集,去重

    #include "iostream" #include "vector" #include "algorithm" //sort函数.交并 ...

  4. 项目启动报错怎么办?看看你Spring自动注入用对了嘛?@Autowired XxxService注入问题解决

    问题 在Controller层使用 @Autowired注入Service时,提示Bean中没有Service 在Service接口中使用 @Component注入后,启动项目问题提示: The we ...

  5. 【MySQL作业】DDL 和 DML——美和易思使用 DDL 定义数据库表结构应用习题

    点击打开所使用到的数据库>>> 1.使用 DDL 创建 easyShopping2 数据库. create database easyShopping2 2.使用 DDL 更改 ea ...

  6. Kafka基础教程(四):.net core集成使用Kafka消息队列

    .net core使用Kafka可以像上一篇介绍的封装那样使用(Kafka基础教程(三):C#使用Kafka消息队列),但是我还是觉得再做一层封装比较好,同时还能使用它做一个日志收集的功能. 因为代码 ...

  7. 很漂亮的一个背景控件——ribbons.js

    写博客的人都喜欢优化自己的博客主页,博主也一样,找了一些背景控件,像canvas-nest.js等等,最终选择了ribbons.js,并基于源码,稍作了一丁点的修改,这里分享出来 (function ...

  8. C# .net 使用rabbitmq消息队列——EasyNetQ插件介绍

    EasyNetQ 是一个简洁而适用的RabbitMQ .NET类库,本质上是一个在RabbitMQ.Client之上提供服务的组件集合.

  9. 将ymal文件内容转换成字典格式

    yaml文件内容如图: 转换代码如下: import yaml def init_yaml(): with open(r"..\config.yaml", 'r', encodin ...

  10. Hive分析统计离线日志信息

    关注公众号:分享电脑学习回复"百度云盘" 可以免费获取所有学习文档的代码(不定期更新)云盘目录说明:tools目录是安装包res 目录是每一个课件对应的代码和资源等doc 目录是一 ...