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
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。