React项目配置路径别名“@”

React项目配置路径别名“@”

首先安装craco

npm i @craco/craco@alpha -D
npm i npm i craco-less

创建craco.config.js

const path = require('path')
const CracoLessPlugin = require('craco-less')const resolve = (dir) => path.resolve(__dirname, dir)module.exports = {plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {// modifyVars: { '@primary-color': '#1DA57A' },javascriptEnabled: true}}}}],webpack: {alias: {'@': resolve('src'),components: resolve('src/components')}}
}

修改tsconfig.json

{"compilerOptions": {.......加上如下两个配置(删掉这个)"baseUrl": "src","paths": {"@/*": ["*"]}},"include": ["src"]
}

修改package.json 使用craco启动项目

 "scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"},

最后启动成功后可能会出现问题 提示你 babel-preset-react-app 未在其依赖中声明
你需要继续安装

npm install --save-dev @babel/plugin-proposal-private-property-in-object

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/27686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网络编程】进程间的通信

进程间通信意味着两个不同进程间交换数据&#xff0c;操作系统中应提供两个进程可以同时访问内存空间。 管道实现进程间通信 管道不属于进程资源&#xff0c;与套接字一样属于操作系统。两个进程通过操作系统提供内存空间进行通信 #include<unistd.h> int pipe(int fil…

IS022000认证:食品安全管理的金标准

食品安全是食品行业的命脉&#xff0c;IS022000食品安全管理体系认证作为最权威的认证之一&#xff0c;为企业提供了强有力的保障。要理解IS022000认证的意义&#xff0c;我们需要先了解它与HACCP和IS09001认证的关系。 HACCP&#xff08;Hazard Analysis and Critical Control…

危化品经营单位(生产管理人员)题库

1.中华人民共和国境内的各类企业的职工和个体工商户的雇工,均有依照工伤保险条例的规定享受&#xff08; &#xff09;待遇的权利。 A.人身保险 B.医疗保险 C.工伤保险 答案:C 2.制定应急预案的目的是抑制&#xff08; &#xff09;,减少对人员、财产和环境的危害。 A.突…

PostgreSQL -public schema

文章目录 Overview查询Schema权限public schema的历史背景撤销权限Granting Privileges结论 Overview 在上一篇文章中&#xff0c;介绍了理解 PostgreSQL schema的基础知识、创建和删除机制&#xff0c;并回顾了几个用例。本文将扩展这些基础知识并探讨与schema相关的权限管理…

Redis入门与实践

Redis是一种开源的、基于内存的高性能键值存储系统&#xff0c;常用于缓存、会话管理、实时数据分析等场景。以下是Redis的入门指南和一些基本的实践示例&#xff0c;帮助你开始使用Redis。 1. 安装和基本配置 安装Redis Redis可以在多种操作系统上安装。以Ubuntu为例&#…

搭建Python虚拟环境(四):Pipenv

使用Pipenv搭建虚拟环境的详细指南 Pipenv 是一个Python包管理工具&#xff0c;它结合了pip和virtualenv的优点&#xff0c;用于创建和管理Python项目的虚拟环境。本文将详细介绍如何使用Pipenv搭建虚拟环境&#xff0c;包括安装Pipenv、创建虚拟环境、激活虚拟环境、退出虚拟…

前端学习CSS之神奇的块浮动

在盒子模型的基础上就可以对网页进行设计 不知道盒子模型的可以看前面关于盒子模型的内容 而普通的网页设计具有一定的原始规律,这个原始规律就是文档流 文档流 标签在网页二维平面内默认的一种排序方式,块级标签不管怎么设置都会占一行,而同一行不能放置两个块级标签 行级…

[Kubernetes] etcd 单机和集群部署

文章目录 1.etcd基本概念2.etcd的基本知识3.etcd优势4.etcd单机部署4.1 linux部署4.2 windows部署4.3 docker安装etcd 5.etcd集群部署 1.etcd基本概念 etcd是一个高可用的分布式键值存储系统&#xff0c;是CoreOS&#xff08;现在隶属于Red Hat&#xff09;公司开发的一个开源…

0614,表达式,语句

题目一&#xff1a; 许多简单的交互式程序都是基于菜单的&#xff1a;它们向用户显示可供选择的命令列表&#xff1b;一旦用户选择了某条命令&#xff0c;程序就执行相应的操作&#xff0c;然后提示用户输入下一条命令&#xff1b;这个过程一直会持续到用户选择 "退出&qu…

关于如何使用不到 ¥800 实现电动升降桌自由(双电机)

前言 在房子装修之前&#xff0c;就想着拥有一个书房。但是如果书房里面没有书桌&#xff0c;那不扯淡么&#xff1f;之后想着天天坐这么久&#xff0c;腰部颈部经常不适&#xff0c;所以又开始纠结买哪款人体工学椅子比较合适。 说时迟那时快。当天偶然刷小红书的时候&#x…

微信小游戏插件申请,微信小程序插件管理

微信小游戏的插件申请与小程序不一样&#xff0c;官方没有提供一个统一的管理入口进行申请插件&#xff0c;以及查看插件&#xff0c;没有小程序方便的&#xff1b; 小程序申请查看插件入口如下图所示&#xff1a; 小游戏的插件可以通过以下的方式进行申请&#xff1a; 如下…

RAG PAPTOR 示例代码理解笔记

RAG PAPTOR 示例代码理解笔记 0. 源代码文件1. 部分代码理解笔记故事背景导入工具固定种子&#xff08;随机种子&#xff09;全局降维函数局部降维函数获取最佳聚类数函数GMM聚类函数执行聚类函数嵌入函数嵌入并聚类文本函数格式化文本函数嵌入、聚类并总结文本函数递归嵌入、聚…

建筑八大员证报名一寸彩色照片要求及手机自拍方法解读

在建筑行业&#xff0c;八大员证的持有者是广受尊重的专业人士。然而&#xff0c;要成为一名合格的八大员&#xff0c;首先必须通过资格审核和报名流程。其中重要的一步就是提交一寸彩色照片&#xff0c;以确保个人信息准确无误。那么&#xff0c;你是否清楚报名时照片的要求以…

Linux笔记--权限与属性命令、查找指令、压缩命令、网络指令

权限 使用ls指令查看详细信息时 rwx分别代表读写执行三种权限&#xff0c;book代表book用户&#xff0c;对于权限来说三种权限分别代表二进制一位&#xff0c;即同时拥有rwx就是111&#xff0c;此时这个文件权限为775 改变权限为rw-rwxr-w指令 book100ask:~/Desktop$ chmod …

Vue I18n国际化插件

Vue I18n国际化插件 安装目录结构及文件内容./locales/lang/zh.js./locales/lang/en.js./locales/index.js main.js引入页面具体使用及语言切换&#xff08;Vue3&#xff09;刷新保存原语言&#xff0c;App.vue添加路由守卫注意点 中文文档&#xff1a; https://kazupon.githu…

sprintboot容器功能

容器 容器功能Spring注入组件的注解Component&#xff0c;Controller&#xff0c;Service&#xff0c;Repository案例演示 Configuration应用实例传统方式使用Configuration 注意事项和细节 Import应用实例 ConditionalConditional介绍应用实例 ImportResource应用实例 配置绑定…

代码随想录算法训练营第六天| 242.有效的字母异位词 | 349. 两个数组的交集 | 202. 快乐数 |1. 两数之和

242.有效的字母异位词 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;学透哈希表&#xff0c;数组使用有技巧&#xff01;Leetcode&#xff1a;242.有效的字母异位词_哔哩哔哩_bilibili 1. 对每一个字符串用一个字典统计每个字母出现的次数&#xff0c;最后比较两个字典…

【微信小程序开发实战项目】——如何去申请腾讯地图账号和在微信公众平台,配置request路径和添加地图插件

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

【算法-力扣】73.矩阵置零,一文彻底搞懂!

目录 一、题目描述 二、解题思路 三、参考答案 一、题目描述 矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 进阶&#xff1a; 一个直观的解决方案是使用 O(mn) 的额外空间&#x…