在vue-cli 3中使用本地字体

Question

我想将本地字体导入我的vue-cli 3项目。

.woff和.woff3文件位于src / assets / typo中，我将它们包括在src / scss / _typo.scss中：

我的_typo.scss看起来像这样：

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Bold.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Medium.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Medium.woff') format('woff');
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Regular.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

这是我的vue.config，用于全局使用颜色和字体：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_colors.scss";
          @import "@/scss/_typo.scss";
        `
      }
    }
  }
};

运行项目时，出现以下错误消息：

Failed to compile.

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module not found: Error: Can't resolve './@/assets/typo/HKGrotesk-Bold.woff' in '/Users/robin/Documents/Code/2018/iamrobin-portfolio/src'

Answer 1

不确定在当前阶段是否有帮助，但是我遇到了同样的问题，并通过使用相对路径（即../assets/fonts/myfont.woff）而不是使用根通配符（即@/assets/fonts/myfont.woff或{{1}）解决了}。

希望对您有帮助！

Answer 2

使用vue-cli 3，您可以使用Webpack 4和默认加载程序，因此您无需为此任务配置任何加载程序。您唯一要做的就是在scss文件夹中创建一个main.scss文件。在该文件中，导入您的_color.scss和_typo.scss。然后，在您的main.js中导入您的主要样式文件，例如import './stylus/main.scss';。这样，您应该就可以开始了。例如，只需在CSS中使用您的字体，例如body {font-family: "HKGrotesk", sans-serif;}。不要忘记从vue.config中删除css加载器，以免干扰webpack的默认行为。

Answer 3

我遇到了同样的问题，希望在vue cli github问题中得到引用：)通过强制自己使用相对路径来解决，但这确实很糟糕。

Answer 4

尝试一下~@/assets/...

@font-face {
  font-family: 'HKGrotesk';
  src:  url('~@/assets/typo/HKGrotesk-Regular.woff2') format('woff2'),
        url('~@/assets/typo/HKGrotesk-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}