webpack：无法构建正确的字体路径

Question

我有一个vue.js项目 - 我使用了webpack模板。

我们有自定义字体。我在我的 scss 中引用它们如下：

$font-path: '~@/assets/fonts/';
@font-face {
font-family: 'someFont';
src: url('./#{$font-path}someFont/someFont.eot') format('eot'),
url('./#{$font-path}someFont/someFont.woff2') format('woff2'),
url('./#{$font-path}someFont/someFont.woff') format('woff'),
url('./#{$font-path}someFont/someFont.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}

构建效果很好 - 字体放置在dist/static/fonts中。但问题是，上层 scss 的引用错误：https://.../projectXY/static/css/static/fonts/someFont.woff2， 这应该是https://.../projectXY/static/fonts/someFont.woff2.

我们没有更改任何 webpack 配置内容，所以它看起来像这样：

{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[ext]')
}
}

我必须更改什么才能使其正常工作？

Answer 1

问题似乎是url语句中的相对路径。

// ...
url('./#{$font-path}someFont/someFont.woff2') format('woff2'),
// ...

我认为您可以删除 url 部分开头的./。

---

更新 1

尝试在样式中使用相对路径。

假设您的文件夹结构如下所示：

.
├── assets
│   └── fonts
│       └── font1.woff2
└── src
└── style
└── main.scss

在样式表中使用../../assets/font1.woff2引用您的字体。这意味着在您的情况下还要调整变量$font-path。