Webpack @ font-face相对path问题

我有一个在angular2应用程序中使用相对path加载字体的问题。

在app.ts我有这两个import

import '../../../public/css/fonts.less'; import '../../../public/css/main.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; } 

这工作正常。 但是，如果我试图改变相对的path，例如

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

我得到这个错误：

错误：./~/css-loader!./~/less-loader!./public/css/fonts.less模块​​未find：错误：无法parsing“文件”或“目录”../fonts/Montserrat/Montserrat -Regular.eot in [./~/css-loader!./~/less-loader!./public/css/fonts.less 6：85-138 ERROR in ./public/css/fonts无模块生成失败：ModuleNotFoundError：找不到模块：错误：无法parsing'文件'或'目录'../fonts/Montserrat/Montserrat-RegularEot in […]

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

PS我需要使用相对path的原因。

Answer 1

在webpack中使用相对path没有特别的理由。 你可以使用webpack别名来摆脱这种需要。 正确使用别名可以解决很多问题，包括这一个。 只需为你的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构build的项目中使用相对path。 原因在于它更清晰可读，避免了在相互依赖的不同地方混合相对path时可能出现的问题。 因此，您可以在一个中心位置定义path，并让webpack为您parsing相对path。