如何使用 webpack 运行 @font-face？答案

【问题标题】：How to get running @font-face with webpack?如何使用 webpack 运行 @font-face？
【发布时间】：2018-12-27 13:42:54
【问题描述】：

我无法让@font-face 与 webpack 一起工作。我正在使用 vuejs 框架。这是我遇到的错误。我尝试使用 url-loader 和 file-loader 但无法解决。我也是 webpack 和 vue 的新手，所以我不知道我做错了什么。

在下一个 img 上你可以看到我的文件夹结构和 webpack 配置。

@font-face {
    font-family: 'Lato-Light';
    src: url('../../fonts/Lato-Light/Lato-Light.eot');
    src: url('../../fonts/Lato-Light/Lato-Light.eot?#iefix') format('embedded- 
opentype'),
    url('../../fonts/Lato-Light/Lato-Light.woff2') format('woff2'),
    url('../../fonts/Lato-Light/Lato-Light.woff') format('woff'),
    url('../../fonts/Lato-Light/Lato-Light.ttf') format('truetype'),
    url('../../fonts/Lato-Light/Lato-Light.svg#Lato-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

所有@font-face 都放在排版文件夹内的index.scss 中，所有内容都导入common 文件夹内的index.scss 中。

【问题讨论】：

尝试使用文件加载器，/\.(woof2?|eot|ttf|otf)$/only。
如果@font-faces 在排版文件夹中，我相信您的网址中的点太少，请尝试url('../../../fonts/Lato-Light/Lato-Light.eot') :)
@MagnusBuvarp 我修复了它，但仍然出现同样的错误
@MatheusSilva 它不起作用

标签： webpack vue.js vuejs2 font-face webpack-2

【解决方案1】：

我发现了问题。所以首先我像这样设置配置并放入规则集合中：

  {
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    loader: 'url-loader?limit=100000'
  }

在那之后，我收到了我的路径不起作用的错误。那是因为我的字体 url 路径与我的根 scss 文件无关。它们与使用的 scss 文件相关。 Sass/libsass 不提供 url 重写，因此所有链接的资产必须与输出相关。我使用 resolve-url-loader 解决了这个问题。

sass-loader problems-with-url

resolve-url-loader

{
    test: /\.css$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'resolve-url-loader'
    ],
  },
  {
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'resolve-url-loader',
      'sass-loader?sourceMap'
    ],
  }

如果你使用的是 vue-loader，你还需要这个：

'scss': [
          'vue-style-loader',
          'css-loader',
          'resolve-url-loader',
          'sass-loader?sourceMap',
          {

【讨论】：

这让我感到 sass 路径没有得到正确解决。

【解决方案2】：

将您的文件加载器选项移动到rules 集合而不是loaders，它已被弃用，似乎已被rules 集合覆盖。

【讨论】：