使用 Rollup 解决 woff 导入问题

Question

我正在尝试使用 Rollup.js 捆绑主题包。主题包括一些全局样式，最相关的@font-face。我正在导入我的字体，并打算通过 styled-components injectionGlobal 注入它们。

当我尝试将包 Rollup 捆绑在字体文件上时。我的假设是 Webpack 和 Rollup 几乎可以互换使用，不是吗？

这样做的正确方法是什么？

控制台出错：

{ SyntaxError: /Users/****/sites/vz-react/packages/Theme/fonts/NeueHaasGroteskDisplayBold.woff: Unexpected character '' (1:4)
> 1 | wOFF:�� 6���OS/2lZ`�  VDMX�w�mt�cmap@\��(cvt �`�
    |     ^
  2 |
       �fpgm��
  3 | �c��gasp
              � glyf
                    �I����rheadV�66�!�vhheaV�!$��hmtxW;*+kernZ$;��ĭloca'��p�\maxp+�  �[name+�   �y*/post4� ��prep5�7ڀɄx�c`f�b������������
  4 | ������9X�@����a����x��3800�fbf�/�p�y9#��������N3(!R��x��eT���g�f`���uƌ�3f������������`���H(ݠ���w���=�w�O���?\��dd�G�Nf2�,d�od%�t�ž��l2;��
...

globalStyles.js：

import NeueHassGroteskDisplayBold from '../fonts/NeueHaasGroteskDisplayBold.woff';
import NeueHassGroteskDisplay from '../fonts/NeueHaasGroteskDisplay.woff';
import NeueHassGroteskText from '../fonts/NeueHaasGroteskText.woff';
import NeueHassGroteskTextBold from '../fonts/NeueHaasGroteskTextBold.woff';

const injectGlobalStyles = () => `
  * {
    box-sizing: border-box;
  }

  *:focus {
    outline: #000 dotted 1px;
    outline-offset: 1px;
  }

  body {
    padding: 0;
    margin: 0;
  }

  @font-face {
    font-family: 'NHGDisplay';
    src: url(${NeueHassGroteskDisplayBold}) format("woff");
    font-weight: bold;
    font-style: normal;
  }

  @font-face {
    font-family: 'NHGDisplay';
    src: url(${NeueHassGroteskDisplay}) format("woff");
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'NHGText';
    src: url(${NeueHassGroteskText}) format("woff");
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'NHGText';
    src: url(${NeueHassGroteskTextBold}) format("woff");
    font-weight: bold;
    font-style: normal;
  }
`;

export default injectGlobalStyles;

Answer 1

另一种方法是使用 rollup-plugin-url 将字体文件捆绑为 base64 字符串：

// rollup.config.js

import url from 'rollup-plugin-url'

export default {
  // ...
  plugins: [
    // ...
    url({
      // by default, rollup-plugin-url will not handle font files
      include: ['**/*.woff', '**/*.woff2'],
      // setting infinite limit will ensure that the files 
      // are always bundled with the code, not copied to /dist
      limit: Infinity,
    }),
  ],
  // ...
}

然后像往常一样导入它们：

// some-file.js

import { createGlobalStyle } from 'styled-components'
import MyFontWoff from '../fonts/my-font.woff'

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'MyFont';
    src: url(${MyFontWoff}) format('woff');
    font-weight: normal;
    font-style: normal;
  }
`

Answer 2

经过详尽的 Google 搜索后，我找不到让 Rollup 拉入字体文件而不会崩溃的方法。

我将我的导入移动到要求在执行导出时调用它，这解决了我的问题。

更新文件：

const injectGlobalStyles = () => {

  const NeueHassGroteskDisplayBold = require('../fonts/NeueHaasGroteskDisplayBold.woff');
  const NeueHassGroteskDisplay = require('../fonts/NeueHaasGroteskDisplay.woff');
  const NeueHassGroteskText = require('../fonts/NeueHaasGroteskText.woff');
  const NeueHassGroteskTextBold = require('../fonts/NeueHaasGroteskTextBold.woff');

  return `
    * {
      box-sizing: border-box;
    }

    *:focus {
      outline: #000 dotted 1px;
      outline-offset: 1px;
    }

    body {
      padding: 0;
      margin: 0;
    }

    @font-face {
      font-family: 'NHGDisplay';
      src: url(${NeueHassGroteskDisplayBold}) format("woff");
      font-weight: bold;
      font-style: normal;
    }

    @font-face {
      font-family: 'NHGDisplay';
      src: url(${NeueHassGroteskDisplay}) format("woff");
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'NHGText';
      src: url(${NeueHassGroteskText}) format("woff");
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'NHGText';
      src: url(${NeueHassGroteskTextBold}) format("woff");
      font-weight: bold;
      font-style: normal;
    }
  `;
};

export default injectGlobalStyles;