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