首先感慨下 自己竟然有半年没登账户 ,干嘛去啦? 从刚接触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 文件的加载规则:

  1. /\.css$/ 修改为 /\.(css|less)$/;                                                                        
  2. use数组调用的方法中新增一个对象元素{loader: require.resolve('less-loader')}

修改完成后,我们就可以在项目中正常使用less了。

如何在通过脚手架create-react-app 创建的react项目中配置 less的更多相关文章

  1. AE创建组件失败,项目中已存在对esri.arcgis.***的引用

    AE创建组件失败,项目中已存在对esri.arcgis.***的引用 解决办法:在解决方案资源管理器的引用中把错误提示中的引用删掉,再创建组件就没问题了.

  2. 创建并在项目中调用SQLSERVER存储过程的简单示例

    使用SQLSERVER存储过程可以很大的提高程序运行速度,简化编程维护难度,现已得到广泛应用.创建存储过程 和数据表一样,在使用之前需要创建存储过程,它的简明语法是: 引用: Create PROC ...

  3. Maven 创建java Web项目,配置Spring,CXF

    1.搭建Maven环境 参考文章 Maven3路程(一)环境搭建 http://www.cnblogs.com/leiOOlei/p/3359561.html Maven3路程(二)Eclipse集成 ...

  4. 了解CSS in JS(JSS)以及在React项目中配置并使用JSS

    目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...

  5. create react app的 css loader 进行局部配置

    { test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnv ...

  6. react:如何创建一个新项目

    如何用react创建一个新的项目 我们打开react官网:https://reactjs.org/docs/create-a-new-react-app.html 看到以下命令 npx create- ...

  7. eclipse创建的maven项目中使用javafx

    类似普通maven项目,不需要特地创建javafx项目. 将fxml资源文件放在resource目录下即可.

  8. IDEA创建的Maven项目中 解决编写pom.xml没有提示

    问题如下 没有提示信息 解决方案 把Repositories中的配置更新成本地仓库 问题解决

  9. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

随机推荐

  1. python安装的各种问题

    在windows上安装python下载mis安装即可. 环境用elipse即可,需要下载pydev插件,配置解释器. 如需用到matplotlib,安装顺序为matplot,numpy,dateuti ...

  2. 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Attribute 对象

      ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Attribute 对象 1.返回顶部 1. HTML DOM Attribute 对象 HT ...

  3. Amphorae 与 Octavia Worker 的安全通信实现

    前言 在前面的章节中我们记录了 LoadBalancer.Listener.Pool.Member 等等 Octavia 核心资源对象的创建流程,本篇我们在此之上继续讨论处于 LB Managemen ...

  4. Pycharm断点调试入门

    断点调试是在开发过程中常用的功能,能清楚看到代码运行的过程,有利于代码问题跟踪.对我这个小白开发来说,还有一个作用是快速熟悉代码,拿到别人写的代码,有时看不太懂或看的很吃力,光这样看很无感,但是通过断 ...

  5. global和nonlocal的用法

    1 nonlocal声明的变量不是局部变量,也不是全局变量,而是外部嵌套函数内的变量.写在内部嵌套函数里面,它实质上是将该变量定义成了全局变量,它等价于用两个global来定义该变量.只不过用两个gl ...

  6. jdbc简单连接oracle数据库

    package com.shangsheng; import java.sql.*; public class UserOracle { public static void main(String[ ...

  7. Windows客户端 Linux服务器通讯 字符编码问题

    Windows下的字符编码默认是gb2312 在Linux下需要转成utf8 才能正确的看到对应的中文编码 提供转换函数 /*------------------------------------- ...

  8. 微服务简历V1.0

    张三 电话:xxx-xxxx-xxxx      邮箱: xxxxxxx@qq.com 年龄:x岁        籍贯:江苏 求职意向:java开发工程师   期望薪资:面议 专业技能 熟练使用Ecl ...

  9. python基础及安装

    一.python介绍 介绍  python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Python这个名 ...

  10. 【VS开发】【图像处理】Pleora推出iPORT CL-U3外置抓帧器

    全球领先的高性能视频接口产品供应商Pleora科技公司近日宣布推出可将Camera Link®摄像头转化为USB3Vision™摄像头的首个产品iPORT CL-U3外置抓帧器,树立了另一个行业里程碑 ...