Webpack @ font-face相对路径问题

时间:2017-02-27 23:18:26

标签: node.js angular typescript webpack font-face

我在使用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   找不到模块:错误:无法解析'file'或'directory'../fonts/Montserrat/Montserrat-Regular.eot in [...]   @ ./~/css-loader!./~/less-loader!./public/css/fonts.less 6:85-138   错误在./public/css/fonts.less   模块构建失败:ModuleNotFoundError:找不到模块:错误:无法解析[...]

中的'file'或'directory'../fonts/Montserrat/Montserrat-Regular.eot

有人知道会出现什么问题吗?

P.S。出于某种原因,我需要使用相对路径。

1 个答案:

答案 0 :(得分:1)

在webpack中使用相对路径没有特别的原因。您可以使用webpack aliases来摆脱这种必要性。正确使用的别名可以解决很多问题,包括这个问题。只需为css和fonts目录指定一个别名:

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为您解析相对路径。