首先感慨下 自己竟然有半年没登账户 ,干嘛去啦? 从刚接触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. leetcode 102二叉树的层序遍历

    5月20更新: 使用借助队列实现bfs,定义len记录队列的尺寸直接进行遍历层序 /** * Definition for a binary tree node. * struct TreeNode ...

  2. tensorflow service部署

    tensorflow+tensorflow-serving+docker+grpc模型上线部署(不需bazel编译,有代码)[https://blog.csdn.net/u013714645/arti ...

  3. Linux-Ubuntu目录

    ubuntu没有盘符这个概念,只有一个根目录/,所有文件都在它下面 /:根目录,一般根目录下只存放目录,在Linux下有且只有一个根目录.所有的东西都是从这里开始.当你在终端里输入“/home”,你其 ...

  4. 利用Python处理向不受信任主机发送请求

    ,HTTP vs HTTPS 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息.HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器 ...

  5. java:struts框架(网路静态U盘项目)

    1.网络静态U盘项目: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYP ...

  6. 错误:expected initializer before "***"

    今天写了一个程序,编译时报了一个错误:expected initializer before "***"报错的语句只是程序开头的一个变量定义语句,怎么会有这样的错误呢,琢磨了半天也 ...

  7. token防爆破?

    先尝试例如删除token  猜token的值等操作 不行就burp抓包 选择Pitchfork模式.选择要爆破的参数 线程设置为1显然只有获取上一个请求返回的taken值才能,做下一次请求 点击Ref ...

  8. elasticsearch 冷热数据的读写分离

    步骤 一.冷热分离集群配置 比如三个机器共六个node的es集群. 每个机器上各挂载一个ssd 和 一个sata.每个机器需要启动两个es进程.每个进程对应不同类型的磁盘. 关键配置: node.ma ...

  9. Java 并发编程:核心理论(一)

    前言......... 并发编程是Java程序员最重要的技能之一,也是最难掌握的一种技能.它要求编程者对计算机最底层的运作原理有深刻的理解,同时要求编程者逻辑清晰.思维缜密,这样才能写出高效.安全.可 ...

  10. linux free 命令 查看内存使用情况

    查看Linux服务器下的内存使用情况,可以使用命令free -m [root@localhost ~]$ free // 以KB为单位显示内存使用情况 [root@localhost ~]$ free ...