最近在把项目里的样式迁移到Emotion（CSS-in-JS方案）时遇到了个小问题，想请教下各位：

之前我在普通CSS文件里引入Font Awesome图标是这么写的，一直都正常：

/* src/App.css */
@import "@fortawesome/fontawesome-free/css/all.css";

但当我把这段引入移到Emotion的Global全局样式中后，Font Awesome图标突然就不显示了，我的代码是这样的：

// src/App.js
import { css, Global } from '@emotion/react';

const imports = css`
  @import "@fortawesome/fontawesome-free/css/all.css";
`;

// 渲染全局样式
<Global styles={imports} />

试了好几种方法，最后把路径改成指向node_modules的相对路径，图标才恢复正常：

const imports = css`
  @import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
`;

我有点疑惑，是不是@开头的这种模块别名式的路径写法，只有普通CSS文件会被打包工具（比如Webpack）识别处理？还是Emotion在解析@import时有什么特殊的逻辑导致的呢？

备注：内容来源于stack exchange，提问作者wyc