如何在create-react-app中设置导入快捷方式/别名?
import { Layout } from '../../Components/Layout'
更改为:
import { Layout } from '@Components/Layout'
我有一个webpack
4.42.0版本。我的根目录下没有webpack.config.js文件。我试着用下面的代码自己创建一个:
const path = require('path')
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/'),
}
}
};
但是它似乎不起作用。我在.env
文件中看到了NODE_PATH=.
的变体。但是我相信,它已经过时了--最好不要使用。而且,我有一个posstcss.config.js
文件。因为我已经安装了TailwindCss,我在那里导入了CSS库。我试着在那里粘贴相同的代码,但是它也不起作用。
4条答案
按热度按时间gblwokeq1#
通过Create React App v.3,这终于成为可能
只是把:
转换为
jsconfig.json
或tsconfig.json
(如果使用打字脚本)这是关于这个的精彩article。
juud5qan2#
最简单的存档方法如下步骤。(与@DennisVash相同的方式显示为,但在简单的形式)
1.安装-安装和设置CRACO。
1.在根目录中创建一个
craco.config.js
文件并配置CRACO:1.在
package.json
文件的scripts部分更新对react-scripts
的现有调用,以使用craco CLI:完成!安装已完成。
现在让我们来测试一下。
文件编制Craco
谢谢你。:)
5w9g7ksd3#
易混淆术语注解
为了使webpack的别名正常工作,您需要配置
create-react-app
的默认值webpack.config.js
。官方的方法是to use the
eject
script。但是推荐的方法是使用库而不弹出(为此找到最现代的库)。VSCode智能感知
此外,您应该为VSCode(或
tsconfig.json
)中的路径IntelliSense加入jsconfig.json
档案,see followup question。现在,这样的代码与IntelliSense一起工作:
zaqlnxep4#
如果您要用途:
使用节点模块插件来解析网址
https://www.npmjs.com/package/babel-plugin-module-resolver
。2通过安装它并将它添加到你的webpack/babel.rc文件中。