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

本文主要是介绍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

这篇关于React项目配置路径别名“@”的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---