问如何在Vue.js工程中添加字体
EN

Stack Overflow用户

提问于 2018-07-26 00:49:06

回答 2查看 21.3K关注 0票数 11

我有一个与Laravel和Vue.js的项目，我使用scss。我想将新字体添加到我的项目中，但我不能这样做。我创建了fonts.scss文件，创建了一个带字体的变量

@font-face {
  font-family: "Proxima Nova Bold";
  src: url(/Proxima-Nova-Bold.otf);
}

$proxima-nova-bold: 'Proxima Nova Bold', sans-serif;

并且我有控制台错误的GET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED

下面是我如何在Vue组件中导入scss文件

@import '../../../fonts/fonts.scss';

这是我的拉瓦尔鸡尾酒

let mix = require('laravel-mix');

mix.copy('resources/assets/images', 'public/images', false)
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')

我哪里弄错了？或者告诉我如何正确添加字体？

javascript

laravel

vue.js

sass

回答 2

Stack Overflow用户

发布于 2018-07-26 14:30:57

基于这个问题，在laravel中，当正确引用字体时，github https://github.com/JeffreyWay/laravel-mix/issues/1172 laravel mix将自动复制字体。

因此，我建议在引用字体时使用相对路径。这实际上应该触发laravel mix在你的"public“文件夹中创建一个文件夹"fonts”

@font-face {
  font-family: "Proxima Nova Bold";
  src: url('./../fonts/Proxima-Nova-Bold.otf');
}

票数 6

Stack Overflow用户

发布于 2018-07-26 08:02:56

您可能需要在mix文件中添加类似以下内容的行：

.copy('resources/fonts', 'public/fonts')

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51524014

复制

相似问题

问如何在Vue.js工程中添加字体
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Vue.js工程中添加字体EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Vue.js工程中添加字体
EN