iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >react如何添加less环境配置
  • 248
分享到

react如何添加less环境配置

2024-04-02 19:04:59 248人浏览 独家记忆
摘要

目录1.安装less2.找到node_modules文件夹里React-scripts/config/webpack.config.js3.然后往下翻代码到下图4.在src目录下创建

1.安装less

npm install less-loader less --save-dev

2.找到node_modules文件夹里react-scripts/config/WEBpack.config.js

在这个下面添加less相关配置

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

3.然后往下翻代码到下图

 在这段代码下面加

{
              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'
              ),
            },

4.在src目录下创建一个less文件,里面写样式

5.引入

6.如果启动报错如下,就说明less-loader版本太高

 7.解决方案,修改less-loader版本,大概6.0.0就好了

npm install less-loader@6.0.0

到此这篇关于react如何添加less环境配置的文章就介绍到这了,更多相关react添加less环境配置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: react如何添加less环境配置

本文链接: https://www.lsjlt.com/news/150031.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react如何添加less环境配置
    目录1.安装less2.找到node_modules文件夹里react-scripts/config/webpack.config.js3.然后往下翻代码到下图4.在src目录下创建...
    99+
    2024-04-02
  • react怎么添加less环境配置
    这篇文章主要介绍了react怎么添加less环境配置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react怎么添加less环境配置文章都会有所收获,下面我们一起来看看吧。1.安装lessnpm in...
    99+
    2023-06-30
  • pycharm如何添加环境
    在 pycharm 中添加环境的步骤如下:创建新环境。选择解释器。自定义环境(可选)。设置环境为活动环境。验证环境。 如何在 PyCharm 中添加环境 PyCharm 是一款流行的 ...
    99+
    2024-04-24
    python pycharm 系统安装
  • React Native 环境配置(mac)
    React Native 环境配置(mac) 1.Homebrew2.Node.js、WatchMan3.Yarn4.Android环境配置1.安装JDK2.下载AndroidStudio1....
    99+
    2023-10-23
    react native macos react.js
  • React Native环境配置搭建
    React Native环境配置搭建(史上最详细教程和注意事项) 一、安装node二、安装yarn三、安装Java Development Kit四、搭建Android 开发环境 React Native官网环境搭建教程写的...
    99+
    2023-08-16
    react native react.js javascript
  • LNMP环境如何配置
    这篇文章主要介绍了LNMP环境如何配置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇LNMP环境如何配置文章都会有所收获,下面我们一起来看看吧。 LNMP环境配置 概念 ...
    99+
    2024-04-02
  • 如何配置nodejs环境
    这篇文章主要介绍如何配置nodejs环境,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、由于node有多种版本号,每个版本号的API肯定也有些细微的差别,在工作中有可能要经常切换n...
    99+
    2024-04-02
  • Flex1.5环境如何配置
    这篇文章主要为大家展示了“Flex1.5环境如何配置”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Flex1.5环境如何配置”这篇文章吧。Flex1.5环境配置虽然价格高,但无可否认!它是目前同...
    99+
    2023-06-17
  • 如何配置php环境
    如何配置php环境?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一.nginx实现php动态解析原理nginx 是一个高性能的http服务器和反向代理服务器。即...
    99+
    2023-06-15
  • pycharm环境如何配置
    配置教程:1、下载并安装PyCharm;2、选择Python解释器;3、配置虚拟环境;4、配置代码风格;5、配置调试器;6、配置版本控制工具;7、配置插件;8、配置Python路径和环境变量;9、配置其他选项。详细介绍:1、从PyCharm...
    99+
    2023-12-19
    pycharm
  • Flutter环境如何配置
    这篇文章主要介绍了Flutter环境如何配置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Flutter环境如何配置文章都会有所收获,下面我们一起来看看吧。当前环境win10as2022.1.1版本jdk11配...
    99+
    2023-07-05
  • mysql如何配置环境
    mysql 环境配置步骤:安装 mysql 安装程序。创建 root 用户并授予权限。修改配置文件(datadir、bind-address、port)。启动 mysql 服务。测试安装...
    99+
    2024-04-14
    mysql
  • react怎么配置多环境域名
    要配置React应用程序的多环境域名,你需要进行以下步骤: 在React应用程序的根目录中创建一个.env文件。这个文件将用于存...
    99+
    2024-04-09
    react
  • pycharm如何快速添加远程环境
    这篇“pycharm如何快速添加远程环境”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“py...
    99+
    2024-04-02
  • IIS上如何添加PHP运行环境
    本篇内容介绍了“IIS上如何添加PHP运行环境”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!下载和安装PHP首先,你需要从PHP官方网站上下...
    99+
    2023-07-05
  • ubuntu如何添加永久环境变量
    ubuntu添加永久环境变量的方法:打开ubuntu的/etc/profile文件,添加以下两个环境变量。export LC_ALL=C.UTF-8export LANG=C.UTF-8在通过vim命令打开“~/.bashrc”文件。在“~...
    99+
    2024-04-02
  • linux如何添加系统环境变量
    要在Linux中添加系统环境变量,可以按照以下步骤进行:1. 打开终端。2. 使用编辑器打开`~/.bashrc`文件,可以使用以下...
    99+
    2023-08-23
    linux
  • Linux系统如何添加环境变量
    小编给大家分享一下Linux系统如何添加环境变量,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1.查看当前环境变量 echo $PATH2.添加临时环境变量 export PATH=...
    99+
    2023-06-28
  • Jupyternotebook中如何添加Pytorch运行环境
    目录1.打开Anaconda中的Anaconda Navigator2.修改channel环境3.找到Jupyter Notebook的位置4.重启Jupyter Notebook5...
    99+
    2023-02-21
    Jupyter notebook Pytorch运行环境 Pytorch环境
  • Linux下如何添加PATH环境变量
    这篇文章主要为大家展示了“Linux下如何添加PATH环境变量”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Linux下如何添加PATH环境变量”这篇文章吧。PATH环境变量作用是指定命令搜索路...
    99+
    2023-06-27
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作