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

问题似乎是vstest.console.exe陈述中的相对路径。

url

我认为您可以删除网址部分开头的// ... url('./#{$font-path}someFont/someFont.woff2') format('woff2'), // ...。

更新1

尝试在你的风格中使用相对路径。

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

./

使用. ├── assets │ └── fonts │ └── font1.woff2 └── src └── style └── main.scss在样式表中引用您的字体。在您的情况下，这意味着还要调整变量../../assets/font1.woff2。

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

1 个答案: