通过css-模块添加字体到滚动包。

Question

因此，我试图创建一个组件库与汇总，我想要一个字体工作，我已经添加了字体脸。

我看过这个https://github.com/rollup/plugins/tree/master/packages/url，但是我只能在使用样式组件时才能找到例子，而且我有css-模块。

然后我找到了这个线程：https://stackoverflow.com/a/61790221，但是当我添加它时，它似乎什么也不做。

我将我的字体脸添加到我的一个组件中，比如：

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: 400;
    src: url('../../shared/fonts/my-font.ttf') format('truetype');
}

我如何将它添加到我的卷起包中？

我的rollup配置如下所示：

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import resolve from '@rollup/plugin-node-resolve';
import image from '@rollup/plugin-image';
import typescript from 'rollup-plugin-typescript2';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import dts from 'rollup-plugin-dts';
/* import url from '@rollup/plugin-url'; */
import url from 'postcss-url';
import copy from 'rollup-plugin-copy';

import pkg from './package.json';

export default [
  {
    input: './src/index.ts',
    output: [
      {
        file: pkg.main,
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: pkg.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({ useTsconfigDeclarationDir: true }),
      babel({
        exclude: 'node_modules/**',
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      }),
      postcss(),
      image(),
    ],
  },
  {
    input: './types/index.d.ts',
    output: [{ file: './dist/mycomponents.d.ts', format: 'es' }],
    plugins: [dts()],
  },
];

(请帮助:)

Answer 1

使用@rollup/plugin-url，我们可以将字体文件添加到汇总包中。在rollup config文件中添加以下内容。

这将查找所有woff, woff2, ttf文件并将其添加到包中。

import url from '@rollup/plugin-url';

plugins: [
    ...
    ...

    url({
      include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
      limit: Infinity,
      fileName: '[dirname][name][extname]',
    }),

    ...
    ...
  ],