Webpack @font-face 相对路径问题

Posted

技术标签:

【中文标题】Webpack @font-face 相对路径问题【英文标题】:Webpack @font-face relative path issue 【发布时间】:2017-07-18 18:19:34 【问题描述】:

我在使用 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 [...]

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

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

【问题讨论】:

【参考方案1】:

在 webpack 中使用相对路径并没有什么特别的原因。您可以使用webpack aliases 来摆脱这种必要性。正确使用别名可以解决很多问题,包括这个。只需为您的 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 为您解析相对路径。

【讨论】:

实施此操作后出现相同错误:找不到模块:错误:无法解析“文件”或“目录”./fonts/Montserrat/Montserrat-Regular.eot in 确保您的 path.resolve(__dirname, 'public/fonts') 解析为您的实际正确路径。这只是一个例子 当然 :) 但这是正确的路径。我还在研究它。 不。在我这边不起作用。同样的错误一次又一次。从文档中我看到这用于导入。你确定这也会解决字体路径吗?顺便说一句,我需要相对路径的原因是我们想在 CDN 上托管项目。这样做时,我们会得到一个每个构建都不同的 URL。如果不使用相对路径,我们会得到错误的 url。 是的,它应该在 css 中正确解析 url。在构建过程中获取 cdn url 时可以创建别名。

以上是关于Webpack @font-face 相对路径问题的主要内容,如果未能解决你的问题,请参考以下文章

使用 Webpack 和 font-face 加载字体

webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

webpack无法使用相对路径解决办法

如何在 webpack 的 css-loader 中使用@font-face?

在 Angular2+Webpack 中使用 templateUrl 的相对路径

webpack 3 sass-loader 无法导入没有相对路径的 scss 文件