如何在 Vue CLI 项目中使用 base64-inline-loader 在 CSS 中嵌入字体文件？

Question

我正在将一些自定义字体文件导入到 vuejs 项目的 scss 文件中。构建时，它会在/dist 文件夹中创建这些与字体相关的文件，以及app.js 和app.css 文件。文件包括font-name.ttf、font-name.woff、font-name.woff2和font-name.svg

我想在项目构建时将这些字体文件嵌入到 app.css 文件中，就像在 base64 数据 uri 中一样。

---

有一个名为 base64-inline-loader 的 npm 包，这似乎是解决我的问题的好选择。

包的文档指出了一种将它与 webpack 配置一起使用的方法。由于我的项目使用 vue-cli 3 和 vue-cli-service 来运行构建命令，我知道我需要使用 vue.config.js 文件来正确配置 base64-inline-loader。

我不是 webpack 专家，只知道它的基本概念。我在vue.config.js 文件中配置包时遇到问题。 希望有人已经有一些经验，最好在 Vue.js 项目中使用相同的包。

请向我提供有效的vue.config.js 文件:)

Answer 1

从默认的 Vue CLI webpack config 可以看出，webpack 通过 url-loader 处理字体：

webpackConfig.module
  .rule('fonts')
  .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
  .use('url-loader')
  .loader('url-loader')
  .options(genUrlLoaderOptions('fonts'))

所以首先你需要删除以前应用到该规则的加载器，并设置需要(base64-inline-loader)。

module.exports = {
  chainWebpack: config => {

  const fontsRule = config.module.rule('fonts')

  // clear all existing loaders.
  // if you don't do this, the loader below will be appended to
  // existing loaders of the rule.
  fontsRule.uses.clear()

  config.module
    .rule('fonts')
    .test(/\.(ttf|otf|eot|woff|woff2)$/)
    .use('base64-inline-loader')
    .loader('base64-inline-loader')
    .tap(options => {
      // modify the options...    
      return options
     })
    .end()
  }
}

附：有用的链接：

Related question.

Replacing Loaders of a Rule.

Adding a New Loader.