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

【问题标题】：use local typeface in vue-cli 3在 vue-cli 3 中使用本地字体
【发布时间】：2018-12-26 21:50:54
【问题描述】：

我想将本地字体导入我的 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'

【问题讨论】：

你有没有想过这个问题？我一直在寻找答案，但无法正常工作。对我来说，我在我的 url 中使用直接的 '/assets/typo/font.woff' 路径。它可以编译，但它没有显示在浏览器中
'/assets/typo/...' 不起作用的原因是它找不到文件。这些文件需要与scss 文件相关。 Webpack 将替换为正确的资产，具体取决于它是在 dev 中运行还是为构建而编译。

标签： vue.js font-face vue-cli

【解决方案1】：

试试这个~@/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;
}

【讨论】：

【解决方案2】：

我一直有同样的问题，我希望它在 vue cli github 问题中被引用 :) 通过强迫自己使用相对路径来修复，但这真的很糟糕。

【讨论】：

【解决方案3】：

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

希望对你有帮助！

【讨论】：

对我来说，如果我使用像 '../assets/font/myfont.woff' 这样的相对路径，我会收到一个模块错误，找不到。如果我只使用普通的 '/assets/fonts/myfont.woff' 它编译得很好，但字体不会显示在浏览器中。

【解决方案4】：

使用 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 的默认行为。

【讨论】：