Webpack @font-face 相对路径问题

Question

我在 angular2 应用程序中使用相对路径加载字体时遇到问题。

在 app.ts 我有这两个进口

import '../../../public/css/fonts.less';
import '../../../public/css/main.less';

在 fonts.less 里面我有这个 @font-face 声明：

@font-face {
    font-family: 'Montserrat';
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot'); /* IE9 Compat Modes */
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/public/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/public/fonts/Montserrat/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

这工作正常。但是，如果我尝试将路径更改为相对路径，例如

url('../../fonts/Montserrat/Montserrat-Regular.eot');

我收到此错误：

./~/css-loader!./~/less-loader!./public/css/fonts.less 中的错误未找到模块：错误：无法解析“文件”或“目录”../fonts/Montserrat/Montserrat -Regular.eot 在 [...] @ ./~/css-loader!./~/less-loader!./public/css/fonts.less 6:85-138 ./public/css/fonts 中的错误.less 模块构建失败：ModuleNotFoundError：找不到模块：错误：无法解析“文件”或“目录”../fonts/Montserrat/Montserrat-Regular.eot in [...]

有人知道可能是什么问题吗？

PS我需要使用相对路径是有原因的。

Answer 1

在 webpack 中使用相对路径没有什么特别的原因。您可以使用webpack 别名来消除这种必要性。正确使用别名可以解决很多问题，包括这个问题。只需为您的 css 和字体目录指定一个别名：

resolve: {
  alias: {
    styles: path.resolve(__dirname, 'public/src'),
    fonts: path.resolve(__dirname, 'public/fonts')
  }
}

然后，使用别名导入模块：

import '~styles/fonts.less';
import '~styles/main.less';

并在你的字体中：

src: url('~fonts/Montserrat/Montserrat-Regular.eot'); 

我个人倾向于避免在 webpack 构建的项目中使用相对路径。原因是它更加清晰和可读，它可以防止在相互依赖的不同位置混合相对路径时可能出现的问题。因此，您有一个定义路径的中心位置，并让 webpack 为您解析相对路径。