如何使用Vite从node_modules加载字体？

Question

我正在尝试从

node_modules

文件夹加载公司字体，该文件夹仅包含字体和图标，它在本地工作。起初，我以为这是因为 Vite/Rollup 默认没有

~

，所以我在 vite 配置中添加了一个别名，但实际上我认为真正发生的是 Rollup 简单地忽略（不包括）我的

node_modules/@company

因为我没有从中导入任何 JS/TS 代码（只是字体/图标），所以我认为 Rollup 可能会在产品构建期间的树摇动过程中跳过或忽略它，因为它是唯一一次引用是通过我的 scss 文件中的

@import

，这可能还不够。

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    Vue({
      reactivityTransform: true,
      template: { transformAssetUrls },
    }),
  ],
  resolve: {
    alias: {
      '~@company': path.resolve(__dirname, 'node_modules/@company'),
      '@': `${path.resolve(__dirname, './src')}`,
    },
  },
}

这仅适用于本地，它不适用于构建（我得到 404）

/* scss file */
@font-face {
  font-family: 'comp-icon';
  src: url('~@company/icons/fonts/comp-icon.woff2') format('woff2'), url('~@company/icons/fonts/comp-icon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

所以就像我说的，我认为 Rollup 在产品构建树摇动过程中完全忽略了我的

node_modules/@company

文件夹。

我寻找为什么它不起作用，并在类似的问题中遇到了这个post，那个人使用

rollup-plugin-copy

lib将字体复制到公共资产文件夹中，这似乎对我有用，但并不理想，因为它在每个版本中将字体从一个地方复制到另一个地方。

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    Vue({
      reactivityTransform: true,
      template: { transformAssetUrls },
    }),
      copy({
        targets: [{ src: './node_modules/@company/icons/fonts/**/*', dest: 'public/assets/fonts' 
      }],
    }),
  ],
  resolve: {
    alias: {
      '~@company': path.resolve(__dirname, 'node_modules/@company'),
      '@': `${path.resolve(__dirname, './src')}`,
    },
  },
}

并与

一起使用

/* scss file */
@font-face {
  font-family: 'comp-icon';
  src: url('fonts/comp-icon.woff2') format('woff2'), url('fonts/comp-icon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

它似乎有效，但我认为这只是一个丑陋的补丁，我真的不想保留这个复制过程，除非我真的必须这样做。我的项目是 Vue 3 + Vite + Vitest，但是我认为我的问题严格来说是 Vite/Rollup 问题。

从

node_modules

加载自定义公司字体的正确方法是什么？我认为该字体在树摇动过程中被排除在 Rollup 之外？我需要做什么才能使其正常工作并期望 Rollup 在我的最终产品版本中包含我的所有字体文件（woff、woff2、ttf）？

编辑

创建评论中提供的像这样的别名SO确实对我的用例有所帮助。然而，就我而言，我想保留

@

作为

src

的别名，所以我添加了

~

别名，它类似于它在 WebPack 中的工作方式，除了我需要在 tilda 之后添加尾部斜杠，它会很高兴找到如何使其与 WebPack 相同（

path.join

应该有帮助，但没有用），但目前还可以接受

resolve: {
    alias: {
      '~': path.resolve(__dirname, './node_modules'),
      '@': `${path.resolve(__dirname, './src')}`,
    },
  },

@font-face {
  font-family: 'se-icon';
  src: url('~/@company/icons/fonts/se-icon.woff2') format('woff2'), url('~/@company/icons/fonts/se-icon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Answer 1

在 Vite 4.0.1 中引用 node_modules 文件夹中的文件对我有用 可能是因为我用的是顺风，IDK。

@import "@openfonts/ubuntu_latin-ext/index.css";