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
)
