首先感慨下 自己竟然有半年没登账户 ,干嘛去啦? 从刚接触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. 精简版 Selenium PageFactory, Annotation 实例

    精简版 Selenium  PageFactory, Annotation 实例. 先是类: HomePage package com.test;import org.openqa.selenium. ...

  2. TCP keepalive的详解(解惑)

    TCP是面向连接的,一般情况,两端的应用程序可以通过发送和接收数据得知对端的存活. 当两端的应用程序都没有数据发送和接收时,如何判断连接是否正常呢? 这就是SO_KEEPALIVE的作用. 1. SO ...

  3. retrofit2+rxjava+okhttp网络请求实现

    第一步:添加依赖: compile 'io.reactivex:rxandroid:1.2.0' compile 'com.squareup.retrofit2:adapter-rxjava:2.1. ...

  4. [ubuntu]如何实现双屏显示

    一.首先直接运行xrandr命令,查看设备的相关信息: 运行之后会显示当前连接设备的屏幕信息,如下图 PS:我已经用HDMI线连接了外接显示器和主机 wangju@wangju-HP--G4:~$ x ...

  5. 阶段3 2.Spring_08.面向切面编程 AOP_5 切入点表达式的写法

    写测试类来测试..也不需要整合JUnit了就是个普通的测试类. 我们要看就是有没有给我们真正的实现 记录日志 配置起作用了. 三个方法都调用一下 目前我们的配置只能对saveAccount增强 通常情 ...

  6. mingw gcc 静态 static 编译 dav1d libdav1d.a

    export CC=/mingw/bin/gcc export CXX=/mingw/bin/g++ meson --prefix "/usr/local" build --bui ...

  7. Day03:数组 、 继承的意义(上)

    继承 面向对象编程三(四)大特征 (抽象),封装,继承,多态什么是继承? 继承是面向对象编程中一种代码复用的方式为什么需要继承? 减少代码冗余,提高程序的可维护性和可扩展性怎样使用继承? 语法: cl ...

  8. 【HANA系列】SAP HANA XS创建XSJOB后台执行

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS创建XSJ ...

  9. cocos2dx基础篇(24) 场景切换效果CCTransitionScene

    [3.x]     (1)去掉 "CC"     (2)卡牌翻转 TransitionFlip 中的样式 tOrientation // //1: kCCTransitionOri ...

  10. Chrome下关闭浏览器,关闭非脚本打开的页面

    今天脚本了里写了一句话: window.close() 但是浏览器却报了警告提示:Scripts may close only the windows that were opened by it,而 ...