如何在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()
  }
}

P.S。有用的链接：

.

Replacing Loaders of a Rule.

Adding a New Loader.

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

How to use base64-inline-loader in Vue CLI project to embed font files in CSS?

configuration

base64

webpack

vue.js

vue-cli