如何在通过脚手架create-react-app 创建的react项目中配置 less
首先感慨下 自己竟然有半年没登账户 ,干嘛去啦? 从刚接触vue 接手做两次版本之后 又让我这个小菜鸡 开始开发react项目,连react生命周期还没搞明白的时候 就开始进行第一版本的开发了,第一个版本是一个基础配置项目,从开始到结束 都是蒙蒙的,上手好难,好在有人带着了第一个项目,经过第一个版本的摧残 ,从第二个到后来的版本 慢慢的从非常紧张到相对松一些的节奏 ,感谢同事们的帮助呢,好啦 废话不説啦!
如何在create-react-app
创建的项目下配置less,其实很简单,只是create-react-app创建的项目没有暴露webpack相关配置,所以需要暴露出webpack相关配置,具体操作如下:
一,暴露webpack配置文件config
在create-react-app
创建的项目下是不支持less的,我们要使用less就需要在相关配置文件中配置。 官方脚手架为了实现“零配置”,会默认把一些通用的脚本和配置集成到 react-scripts,被其集成的脚本和配置会从程序目录中消失( webpack 相关配置文件) 。
所以通过命令
npm run eject
该命令只能执行一次并且 不可逆,执行后,项目中会多一个config文件。
在新建一个项目后,执行这个命令的时候,有可能会遇上以下报错:
是需要通过git 提交下代码 可以通过以下命令 进行操作:
二,安装less\less-loader依赖
可能会因为网络问题 安装不成功,可以试试热点 或者是镜像安装
三,修改 webpack 配置
在webpack.config.js
文件中找到关于 css 文件的加载规则:
/\.css$/
修改为/\.(css|less)$/
;- 在
use
数组调用的方法中新增一个对象元素{loader: require.resolve('less-loader')}
。
修改完成后,我们就可以在项目中正常使用less了。
如何在通过脚手架create-react-app 创建的react项目中配置 less的更多相关文章
- AE创建组件失败,项目中已存在对esri.arcgis.***的引用
AE创建组件失败,项目中已存在对esri.arcgis.***的引用 解决办法:在解决方案资源管理器的引用中把错误提示中的引用删掉,再创建组件就没问题了.
- 创建并在项目中调用SQLSERVER存储过程的简单示例
使用SQLSERVER存储过程可以很大的提高程序运行速度,简化编程维护难度,现已得到广泛应用.创建存储过程 和数据表一样,在使用之前需要创建存储过程,它的简明语法是: 引用: Create PROC ...
- Maven 创建java Web项目,配置Spring,CXF
1.搭建Maven环境 参考文章 Maven3路程(一)环境搭建 http://www.cnblogs.com/leiOOlei/p/3359561.html Maven3路程(二)Eclipse集成 ...
- 了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...
- create react app的 css loader 进行局部配置
{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnv ...
- react:如何创建一个新项目
如何用react创建一个新的项目 我们打开react官网:https://reactjs.org/docs/create-a-new-react-app.html 看到以下命令 npx create- ...
- eclipse创建的maven项目中使用javafx
类似普通maven项目,不需要特地创建javafx项目. 将fxml资源文件放在resource目录下即可.
- IDEA创建的Maven项目中 解决编写pom.xml没有提示
问题如下 没有提示信息 解决方案 把Repositories中的配置更新成本地仓库 问题解决
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
随机推荐
- python安装的各种问题
在windows上安装python下载mis安装即可. 环境用elipse即可,需要下载pydev插件,配置解释器. 如需用到matplotlib,安装顺序为matplot,numpy,dateuti ...
- 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Attribute 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Attribute 对象 1.返回顶部 1. HTML DOM Attribute 对象 HT ...
- Amphorae 与 Octavia Worker 的安全通信实现
前言 在前面的章节中我们记录了 LoadBalancer.Listener.Pool.Member 等等 Octavia 核心资源对象的创建流程,本篇我们在此之上继续讨论处于 LB Managemen ...
- Pycharm断点调试入门
断点调试是在开发过程中常用的功能,能清楚看到代码运行的过程,有利于代码问题跟踪.对我这个小白开发来说,还有一个作用是快速熟悉代码,拿到别人写的代码,有时看不太懂或看的很吃力,光这样看很无感,但是通过断 ...
- global和nonlocal的用法
1 nonlocal声明的变量不是局部变量,也不是全局变量,而是外部嵌套函数内的变量.写在内部嵌套函数里面,它实质上是将该变量定义成了全局变量,它等价于用两个global来定义该变量.只不过用两个gl ...
- jdbc简单连接oracle数据库
package com.shangsheng; import java.sql.*; public class UserOracle { public static void main(String[ ...
- Windows客户端 Linux服务器通讯 字符编码问题
Windows下的字符编码默认是gb2312 在Linux下需要转成utf8 才能正确的看到对应的中文编码 提供转换函数 /*------------------------------------- ...
- 微服务简历V1.0
张三 电话:xxx-xxxx-xxxx 邮箱: xxxxxxx@qq.com 年龄:x岁 籍贯:江苏 求职意向:java开发工程师 期望薪资:面议 专业技能 熟练使用Ecl ...
- python基础及安装
一.python介绍 介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Python这个名 ...
- 【VS开发】【图像处理】Pleora推出iPORT CL-U3外置抓帧器
全球领先的高性能视频接口产品供应商Pleora科技公司近日宣布推出可将Camera Link®摄像头转化为USB3Vision™摄像头的首个产品iPORT CL-U3外置抓帧器,树立了另一个行业里程碑 ...