如何在通过脚手架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 ...
随机推荐
- 精简版 Selenium PageFactory, Annotation 实例
精简版 Selenium PageFactory, Annotation 实例. 先是类: HomePage package com.test;import org.openqa.selenium. ...
- TCP keepalive的详解(解惑)
TCP是面向连接的,一般情况,两端的应用程序可以通过发送和接收数据得知对端的存活. 当两端的应用程序都没有数据发送和接收时,如何判断连接是否正常呢? 这就是SO_KEEPALIVE的作用. 1. SO ...
- retrofit2+rxjava+okhttp网络请求实现
第一步:添加依赖: compile 'io.reactivex:rxandroid:1.2.0' compile 'com.squareup.retrofit2:adapter-rxjava:2.1. ...
- [ubuntu]如何实现双屏显示
一.首先直接运行xrandr命令,查看设备的相关信息: 运行之后会显示当前连接设备的屏幕信息,如下图 PS:我已经用HDMI线连接了外接显示器和主机 wangju@wangju-HP--G4:~$ x ...
- 阶段3 2.Spring_08.面向切面编程 AOP_5 切入点表达式的写法
写测试类来测试..也不需要整合JUnit了就是个普通的测试类. 我们要看就是有没有给我们真正的实现 记录日志 配置起作用了. 三个方法都调用一下 目前我们的配置只能对saveAccount增强 通常情 ...
- mingw gcc 静态 static 编译 dav1d libdav1d.a
export CC=/mingw/bin/gcc export CXX=/mingw/bin/g++ meson --prefix "/usr/local" build --bui ...
- Day03:数组 、 继承的意义(上)
继承 面向对象编程三(四)大特征 (抽象),封装,继承,多态什么是继承? 继承是面向对象编程中一种代码复用的方式为什么需要继承? 减少代码冗余,提高程序的可维护性和可扩展性怎样使用继承? 语法: cl ...
- 【HANA系列】SAP HANA XS创建XSJOB后台执行
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS创建XSJ ...
- cocos2dx基础篇(24) 场景切换效果CCTransitionScene
[3.x] (1)去掉 "CC" (2)卡牌翻转 TransitionFlip 中的样式 tOrientation // //1: kCCTransitionOri ...
- Chrome下关闭浏览器,关闭非脚本打开的页面
今天脚本了里写了一句话: window.close() 但是浏览器却报了警告提示:Scripts may close only the windows that were opened by it,而 ...