如何在react内使用@符号作为src文件

2023-05-11 19:11| 来源: 网络整理| 查看: 265

前言我们再写react代码引用组件或者scss的时候，可能会不停的翻阅层级来寻找定义的文件位置我们是用craco解决这个问题。想要在react中使用@符号,我们需要分两步进行: 第一步就是让VsCode识别@符号第二步是让webpag识别第一步 VsCode识别@符号在你的项目根目录中创建一个jsconfig.json文件 { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } }

目的就是将@/路径指向src/ 注意：此时代码会报错,提示@符号无法识别,当然,这不是vscode本身报错,而是webpag无法识别,我们接下来就想办法让webpag识别

第二步让webpag识别 2.1引入craco yarn add @craco/craco 2.2 配置craco.config.js文件在项目根目录下创建一个craco.config.js文件 const path = require('path') module.exports = { webpack: { alias: { '@': path.join(__dirname, 'src') } } } 2.3 修改package.json文件,将craco作为执行文件 /* package.json */ "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "start": "craco start", + "build": "craco build", + "test": "craco test", + "eject": "react-scripts eject" } 最后再把代码跑起来,这样就可以在react内使用@标识符了希望对你有所帮助码云地址：react-question-v6 参考文档：

如何在react内使用@符号 React 添加引用路径时,使用@符号作为src文件

【本文地址】

公司简介

联系我们