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

React项目配置路径别名"@"

首先安装craco

bash 复制代码
npm i @craco/craco@alpha -D
npm i npm i craco-less

创建craco.config.js

bash 复制代码
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

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

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

bash 复制代码
 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

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

你需要继续安装

bash 复制代码
npm install --save-dev @babel/plugin-proposal-private-property-in-object
相关推荐
Vicky&James1 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_748233645 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟13 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386314 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596015 分钟前
前端代理,解决跨域问题讲解
前端
quitv20 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238128 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星30 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端