Webpack @ font-face相对路径问题 [英] Webpack @font-face relative path issue

问题描述

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

I have an issue with loading the fonts using a relative path in an angular2 application.

在app.ts中，我有两个进口

In app.ts I have these two imports

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

在fonts.less里面，我有以下@ font-face声明:

Inside the fonts.less I have this @font-face declaration:

@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;
}

这很好用.但是，如果我尝试将路径更改为相对路径，例如

And this works fine. But if I try to change the path to relative e.g.

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:未找到模块:错误:无法解析[...]

ERROR in ./~/css-loader!./~/less-loader!./public/css/fonts.less Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/Montserrat/Montserrat-Regular.eot in [...] @ ./~/css-loader!./~/less-loader!./public/css/fonts.less 6:85-138 ERROR in ./public/css/fonts.less Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/Montserrat/Montserrat-Regular.eot in [...]

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

Someone knows what can be the problem ?

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

P.S. I need to use relative paths for a reason.

推荐答案

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

There is no particular reason for using relative paths in webpack. You can use webpack aliases to get rid of this necessity. Properly used aliases can resolve a lot of issues, including this one. Just specify an alias for your css and fonts directory:

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

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

and then, import the modules using aliases:

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

并在您的字体中:

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

我个人倾向于避免在Webpack构建的项目中使用相对路径.原因是它更干净，更易读，可以避免在相互依赖的不同位置混合相对路径而可能引起的问题.因此，您可以在中心位置定义路径，并让webpack为您解析相对路径.

I personally tend to avoid using relative paths in my webpack-built projects. The reason is that it is much more cleaner and readable, it prevents from problems that may arise with mixing the relative paths in different places that are dependent on each other. As a result, you have a central place where you define your paths and let the webpack resolve the relative paths for you.

这篇关于Webpack @ font-face相对路径问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！