如何在不执行eject的情况下，在creact-react-app脚手架项目中启用less、装饰器语法，关于报错'decorators-legacy' isn't currently enabled

最新推荐文章于 2024-08-28 04:05:46 发布
最新推荐文章于 2024-08-28 04:05:46 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端 文章标签： reactjs less webpack npm node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ichinoseeki/article/details/104566990
版权
本文介绍了如何在不执行eject的情况下，在create-react-app(CRA)项目中启用less和装饰器语法。首先，可以通过修改`webpack.config.js`避免eject，其次，利用`react-app-rewired`和`customize-cra`进行配置，解决了'decorators-legacy'未启用的错误。在过程中遇到了CSS Loader的localIdentName问题，通过删除默认参数解决了该问题。
摘要由CSDN通过智能技术生成

太长不看的直接对照我写的demo项目的文档操作就行，文档最下面有介绍如何在其他项目中使用，手工修复的方法本文第三种方案有介绍。

码云项目：demo-less-in-cra

说明文档

个人写css样式更偏好less，奈何react脚手架默认只支持scss，如果直接引入less文件，不会看到任何样式效果（当然项目中提前安装好less和less-loader插件）。

先说第一种方法，脚手架中的npm run eject命令将暴露项目的所有配置文件到根目录，这样只需要执行npm install -D less-loader安装解析器依赖，然后更改.babelrc或者babel.config.js文件的配置就可以实现效果（取决于启用了那个文件的配置）。

操作方法参考

但是eject命令是不可逆的，虽然可以在执行前将代码提交一份来曲线救国，但是对于后期维护不太有利。既然命令是将配置解开暴露到根目录，那么我们不执行命令，直接找的对应的配置文件修改了不就可以了吗？这就是第二种方法。

eject命令实际执行react-scripts eject，也就是react-scripts这个依赖项的自定义命令，在node_modules文件夹找到react-scripts后会发现一个文件

node_modules/react-scripts/config/webpack.config.js

只要安装上面参考地址的做法，对这个文件做出同样的修改，也就能在不执行eject命令的情况下达到目的了。

然而这样做又会引出另一个问题。一般情况下项目管理都不会将node_modules文件夹纳入监管列表，一旦别人需要拉取项目，运行后却丢失了所有样式，绝对会一脸懵逼。

既然如此，那我们就必须得在项目跑起来之前用准备好的文件替换依赖项的文件了。关于如何在NodeJS项目中自定义命令以及文件拷贝等问题这里就不再赘述，有兴趣的可以查看以下链接：

NodeJS fs - 文件系统

最低0.47元/天 解锁文章
Ichinoseeki
关注
专栏目录
create-react-app不运行 eject 配置less
woyidingshijingcheng的博客
05-29 1838
问题的由来 crate-react-app是我们非常常用的初始化项目点的工具，在默认情况下，刚创建的好的项目是没有暴露出配置的，如果需要暴露则需要运行对应的命令： yarn/npm run eject 但是既然官方不推荐我们来暴露这些配置，那么有没有办法不暴露配置就能实现我们的一些常用配置呢？ 答案是肯定的： 有多种方式可以实现，我这里具体讲讲我探究出来的方案： 基于customize-cra 来配置less . customize-cra的可配置项 开始配置 首先按照基本的套路来，先安装对应的库 yar
如何在create-react-app里使用@装饰器
daydream13580130043的博客
05-24 2145
问题描述： 由于create-react-app目前还没有添加装饰器，直接用的话会报错，但项目中不得不使用装饰器，比如引入MobX。 解决方法： 我们可以根据奥卡姆剃刀原理以及鸵鸟算法 => 不使用装饰器 @observer class A {} //等价于 const A = observer(class A {}); @action function f () { } // ...
react 项目支持 装饰器写法 Support for the experimental syntax 'decorators-legacy' isn't currently enabled
热门推荐
Jane_96的博客
01-12 2万+
npm install @babel/plugin-proposal-decorators 安装后再package.json里面加一句话（babel里面plugins那句）： "babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy"...
React项目-less、antd配置
最新发布
weixin_34611277的博客
08-28 52
一、创建Reract项目1、创建React项目登录后复制 npx create-react-app react-test1.2、运行eject Cesium静态资源需要webpack配置，执行npm run eject可以生成webpack配置，运行前先查看当前git版本是否有提交，如果未提交，需要先本地提...
在react中引入装饰器报错, Support for the experimental syntax 'decorators-legacy' isn't currently enabled
weixin_44471622的博客
04-09 646
在新建的react脚手架中引入mobx的装饰器，会报以下错误 Support for the experimental syntax 'decorators-legacy' isn't currently enabled 这是因为我们没有装支持装饰器的组件，需要完成以下几步： 1. 运行npm run eject 暴露配置文件 注意：在新建的react脚手架中，运行npm run eject命令会...
React 引入less
weixin_44425559的博客
05-04 1368
react 安装less 1.安装less 和less-loader npm i less@3.9.0 --save npm i less-loader@4.1.0 --save 2.暴露webpack.config.js npm run eject 出现报错（Remove untracked files, stash or commit any changes, and try again.）执行下面命令 git init git add . git commit -m 'up' 3.配
create-react-app配置 less
刘振兴的博客
09-17 1122
const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; const lessRegex = /\.less$/; const lessModul...
在 create-react-app 中启用装饰器语法
浮沉半生的博客
04-03 1188
本文简单介绍了一下如何在 create-react-app 中启用装饰器语法的两种方式。 方式一：暴露 create-react-app 的配置 暴露出 create-react-app 的所有配置 运行命令： $ npm run eject 项目中就会展示出各种配置文件。 在 babel 中添加 plugins 配置 在 package.json 文件中找到 babel 的配置，添加如下代码即...
让react项目支持"decorators"装饰器语法
王龙楷
12-16 6607
写在前面；最近在学习ESNext，当学习到装饰器部分时，就需要让项目支持装饰器语法，但是在网上搜索了一番，没有让我成功的。幸好在各种摸索中，我最终还是成功。于是我写下这篇文章，希望对需要它的人有所帮助，同时也是当作自己的一篇笔记。 此次配置我是在react项目中进行配置的，目的是让react项目中的高阶组件支持装饰器语法，当然让它能与mobx配合使用也是我的目的之一。 具体步骤： 一.新建reac...
create-react-app 初始化的项目，如何启用 babelrc 配置文件
止水聊技术
07-15 3800
使用 create-react-app 初始化的项目，能满足大多数情况下的需求，但是想用装饰器等比较新的技术时，你可能会去创建一个.babelrc 文件，然后配置成如下操作 安装 npm i -D @babel/plugin-proposal-decorators 配置 .babelrc { "plugins": ["@babel/plugin-proposal-decorators"...
react引入less
weixin_42261408的博客
07-25 341
creat-react-app项目中引入less 1.安装less-loader 运行 `npm install less-loader --save` 安装 2.弹出webpack配置 运行 `npm run eject`即可弹出 3.修改webpack配置 第一步： const lessRegex = /\.less$/; const lessModul...
create-react-app中添加less支持的实现
12-13
前言 使用 create-react-app 脚手架创建项目后，默认是不支持 less 的。所以我们需要手动添加。 第一步 暴露webpack配置文件 使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用下面命令即可： npm run eject 运行之后，我们发现多了一个config文件夹 这样就可以修改 webpack 相关配置了。 第二步 添加less 在项目根目录 使用 npm 或者 yarn 来安装 less 和 less-loader,我这里使用的是 yarn yarn add less les
react中引入less
cs小白的博客
03-22 1136
react中引入less
React中引入less
我乃小神神的博客
04-27 1万+
2019年4月27 21:16 坐标成都 22岁的你，一定要努力
react项目中引入less
GaoZhuoLin的博客
12-31 383
react项目中引入less你要先有一个react项目安装less 你要先有一个react项目 npm install -g create-react-app create-react-app my-react （创建文件名为my-react的项目） cd my-react （进入根目录） npm start （编译程序运行my-react这个项目） 进入（http://localhost:3000/） 安装less npm i less less-loader --save 然后使用命令npm
react学习-引入less
weixin_42429288的1博客
08-05 2763
使用create-react-app脚手架搭建一个项目，并在其中引入less 命令行输入 安装less和less-loader 配置webpack.config.js 第一种方式 第二种配置方式 要注意一个小细节 使用create-react-app脚手架搭建一个项目，并在其中引入less 参考大佬的两种方法 都可以实现，其中遇到了坑，记录一下 搭建好脚手架以后，打开隐藏的配置文...
在react项目里面引入less预处理器
qq_46341900的博客
10-02 519
react项目默认支持的scss和css,如果要引入less，要自己配置,下面介绍两种在react里面引入less的方式 1.使用vscode插件 这种方式是很简单不需要动react配置文件的。 下载easy-less插件 然后配置相关的配置: "less.compile": { "outExt": ".less" } 他是在你写的时候将less文件编译成css，所以你在react里面引入的时候要引入css文件. 2.修改配置文件 通过暴露webpack.config.js文件的方式来配置.
React 安装使用 Less（详细流程，包含 webpack、craco 方式）
卡尔特斯
09-04 2439
React项目开发中可能会使用到LessSass等样式预处理器，创建的React项目，默认就是支持Sass的。如果需要使用Less则需要额外手动安装配置。
手动集成Less到React项目：create-react-app与less-loader的结合
"这篇文章除了介绍如何解决React官方脚手架create-react-app不支持Less的问题，还涉及到了React项目构建、环境准备、webpack配置和脚手架的工作原理。" 在React开发中，create-react-app是一个非常受欢迎的工具，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值