Vite - 单独的字体块答案

【问题标题】：Vite - Separate chunk for fontsVite - 单独的字体块
【发布时间】：2022-10-04 21:28:34
【问题描述】：

我正在构建一个包含组件和一些共享 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';

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

【问题讨论】：

您是否设法拆分字体块？我正在寻找那个
我将 lib 迁移到 webpack。看起来现在没有办法做到这一点。

标签： vue.js rollup vite

【解决方案1】：

通过将字体放在特殊的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 路径。

【讨论】：