Vite - 单独的字体块

我正在构建一个包含组件和一些共享 CSS 的库,例如设计系统。

问题是它没有将字体分成不同的块,而是将它们内联在字体中作为base 64,所以CSS文件变得很大!

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'design-system',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  resolve: {
    alias: [
      { find: '@', replacement: '/src' },
    ],
  },
});

我已经尝试将它放在 root/public 中,但它没有用。

我有一个文件 _fonts.css 像这样导入字体

@font-face {
  font-family: Inter;
  src: url('/public/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
}

然后我有一个导入它的 main.scss

// main.scss
@import 'normalize';
@import 'themes';
@import 'fonts';

关于如何拆分它的任何想法?

stack overflow Vite - Separate chunk for fonts
原文答案

答案:

作者头像

通过将字体放在特殊的 public 目录中(参见: https://vitejs.dev/guide/assets.html#the-public-directory ),我能够在我们正在开发的库中完成此操作。

长话短说,将资产放在那里会使 Vite 复制它们而无需任何实际的转换和/或重命名。

首先将您的字体文件放在 public/fonts/ 中。

然后将以下内容添加到 vite.config.ts

{
  root: './',
  publicDir: 'public',
}

这是必要的,尽管它应该是默认设置。

然后我的字体声明如下所示:

@font-face {
  font-family: MyFont;
  src: url('./fonts/myfont.woff2');
  font-weight: 200;
}

但是 - 这是图书馆模式。如果您正在构建应用程序,只需使用 / 而不是 ./ 开始字体 URL 路径。