REACT-通过craco配置别名和less文件-以及问题解决办法

已于 2022-09-15 15:15:01 修改
阅读量2.2k 收藏 4
点赞数 3
文章标签： react.js less 前端
于 2022-09-15 11:54:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuokoukele/article/details/126867427
版权
本文档介绍了在React项目中如何使用craco配置文件别名和处理less文件，包括安装craco，创建craco.config.js文件，设置webpack别名，并解决与ant design的less配置冲突问题，以及针对特定craco版本的兼容性调整。
摘要由CSDN通过智能技术生成

关于项目创建,引入文件层级比较深时,一般为../../../,为节省时间,美观页面,方便查阅采用了与Vue一样的格式,配置文件路径.

在react中采用通过craco配置别名和less文件,指令如下:

npm install @craco/craco@alpha -D

 然后在目录中添加文件craco.config.js,并编写webpack配置

这时会发现,依然是不生效的,需要我们在package.json中修改脚本,将路径改为craco

 

 之后是配置less,这时是有产生文件冲突问题的,找到文档ant design,

 

最低0.47元/天 解锁文章
kuokoukele
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
create-react-app中配置less与别名alias（使用craco）
init_8y0的博客
07-21 1172
create-react-app中配置less和别名alias（craco方案）
react 配置less
m0_59148573的博客
06-12 178
在项目package.json的同级目录下创建一个文件craco.config.js文件。
craco-less:一个用于craco react-scripts create-react-app的Less插件
04-28
社区维护 我们依靠您的帮助来使该项目保持最新状态，并使用最新版本的craco和react-scripts 。 发送PR之前，请检查以下内容： 100％的测试覆盖率 jest --coverage --testPathIgnorePatterns test-app 代码使用Prettier格式化 yarn prettier --write "**/*.{js,jsx,json,css,scss,html,md,yml}" 没有ESLint警告 yarn eslint --fix --ext .js lib/ NPM软件包中没有安全漏洞 yarn audit 也欢迎您将GitHub用户名添加到本自述文件底部的“部分。 （可选） 如果不满足上述要求，请不要发送拉取请求 如果Travis CI上的构建失败，则拉取请求将被忽略并关闭。 Craco Less插件 这是一个插件，它为版本> = 2添
craco别名配置
ben_grf的博客
12-09 1249
craco版本：6.3.0 1.安装craco-alias yarn add craco-alias 2.craco.config.js配置 const CracoAlias = require("craco-alias"); const WebpackBar = require("webpackbar"); const path = require("path"); module.exports = { plugins: [ { plugin: CracoAlias,
React项目利用craco配置别名和less
weixin_47593738的博客
03-25 635
第一步：安装craco和craco-less 第二步：在项目根目录创建craco.config.js文件 第三步：在项目根目录创建jsconfig.js文件
react项目中craco配置less
weixin_45950826的博客
07-09 4128
安装craco npm i @craco/craco 安装less npm i less 修改package.json文件 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, 安装craco-less npm i craco-less 配置装饰器 npm i @babel/plu
解决craco配置别名不生效，如何使用craco对react项目配置别名。
m0_70718568的博客
12-10 1324
如何使用craco配置react项目别名，怎么解决craco配置不生效的问题。
在create-react-app中craco配置less及alias后路径跳转问题
mus-z的博客
04-02 2185
首先是配置alias https://www.jianshu.com/p/7e1f1e535b8c介绍了如何配置cra的antd的less形式以及babel-plugin-import按需加载 yarn add antd @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D 根目录下创建 craco.config.js const CracoLessPlugin = require('craco-
CRA应用使用craco实现webpack配置+module.less+src别名配置等一系列基本配置
yiguoxiaohai的博客
05-12 1950
create-react-app + craco修改webpack配置 + module.less + @别名配置src + 样式重置 + 自动注入全局样式或变量 + 代码混淆 + 企业级路由配置 + 配置 keep-alive + 控制台调试+构建产物分析+设计稿的比例和单位转换 + 代码格式化
craco 配置 create-react-app 的开发环境以及部分webpack环境
m0_48164934的博客
04-07 1236
小景UU 使用 craco 配置 create-react-app 的开发环境,开放部分webpack配置 antd组件按需加载， 支持less， 支持 类装饰器 语法， 支持webpack 别名并支持vscode 支持路径补全 依赖版本可以根据自己配置修改或查阅相关文档 配置步骤 创建新项目使用 create-react-app 创建一个项目，这里我们命名为 my-project-name create-react-app my-project-name 进入项目，安装依赖 npm inst
react+ts+craco+module.less
weixin_42478537的博客
06-14 800
但是，它提供的默认配置是有限的，如果我们需要自定义配置，就需要自己去eject或者手动配置。在没有使用craco之前，我们需要手动安装less和less-loader，并在webpack.config.js中进行相应的配置。接下来，我们需要在项目根目录下创建一个craco.config.js文件，然后在这个文件中添加我们的自定义配置。，这样会导致craco版本不够新，也就是运行报错的关键，所以使用我这边的命令，安装最新版本的craco-less。安装完了之后，我们就可以开始配置我们的React应用程序了。
React 安装使用 Less（详细流程，包含 webpack、craco 方式）
卡尔特斯
09-04 2283
React项目开发中可能会使用到LessSass等样式预处理器，创建的React项目，默认就是支持Sass的。如果需要使用Less则需要额外手动安装配置。
React+Vite+TS项目使用Alias路径别名不能点击跳转到指定文件
空中弥漫着HTML的博客
03-02 1326
用 Vite 搭建一个React+TypeScript项目，文件导入模块由于有些层级过深，那么不得不在webpack配置文件里配置路径别名，减少路径代码，如下图。但是在导入模块时，虽然配置好了别名代码基础路径，但是却丢失了ctrl+鼠标左键的一键跳转模块的功能，而且ts提示没有模块声明文件。
在CRA中配置别名路径并添加别名路径提示
weixin_43599321的博客
05-08 769
目的：简化项目中的路径处理，和Vue项目中的类似。自定义CRA的默认配置CRA将所有工程化配置，都隐藏在包中，所以项目中看不到任何配置信息。通过第三方库来修改，比如,（推荐）通过执行yarn eject命令，释放中的所有配置到项目中，该过程不可逆（不常用）在本文中将主要介绍第一种方法，第二种方法请自行探索目的：配置了路径别名后，输入别名时是不会有路径提示的，该步能够让VSCode识别别名并给出路径提示。
推荐一款强大且易用的开源插件：Craco Less 插件
最新发布
gitblog_00039的博客
06-22 524
???? 推荐一款强大且易用的开源插件：Craco Less 插件 项目地址:https://gitcode.com/DocSpring/craco-less 在构建现代Web应用时，我们常常会遇到样式处理的挑战，尤其是在使用React框架和Create React App脚手架的情况下。为了解决这些问题并提供更灵活、更强大的样式管理解决方案，今天我向大家强烈推荐一个开源项目——Craco Less插件...
react 使用craco配置别名路径
m0_69210482的博客
11-16 319
【代码】react 使用craco配置别名路径。
craco配置别名报错 Field ‘browser‘ doesn‘t contain a valid alias configuration
xiaoerduo123x的博客
02-10 991
react使用craco配置别名报错 Field 'browser' doesn't contain a valid alias configuration
create-react-app 如何配置支持less
07-13
要配置 create-react-app 支持 Less，您需要执行以下步骤： 1. 首先，确保您已经在项目目录中安装了 `less` 和 `less-loader`。您可以使用以下命令进行安装： ``` npm install less less-loader ``` 或者 ``` yarn add less less-loader ``` 2. 打开项目目录中的 `src` 文件夹，创建一个新的名为 `index.less` 的文件。这将是您的主要 Less 文件。 3. 在 `index.less` 文件中，您可以编写您的 Less 样式代码。 4. 接下来，打开 `src/index.js` 文件，并添加以下代码来引入 `index.less` 文件： ```javascript import './index.less'; ``` 5. 最后，在项目根目录中的 `src` 文件夹中创建一个名为 `webpack.config.js` 的文件，并添加以下内容： ```javascript module.exports = { module: { rules: [ { test: /\.less$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'less-loader', }, ], }, ], }, }; ``` 完成上述步骤后，您的 create-react-app 将支持 Less，并且您可以在项目中使用 Less 样式。请注意，这种方式仅适用于 create-react-app 版本2及以上。如果您使用的是旧版本，请参考官方文档进行配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值