Javascript 使用汇总解决woff导入
我正在尝试使用Rollup.js捆绑一个主题包。主题包括一些全局样式,最相关的@font-face。我正在导入我的字体,并打算通过样式化组件注入它们 当我试图捆绑软件包时,Rollup会阻塞字体文件。我的假设是Webpack和Rollup可以互换使用,不是吗 这样做的正确方法是什么 控制台中出现错误:Javascript 使用汇总解决woff导入,javascript,css,node.js,styled-components,rollup,Javascript,Css,Node.js,Styled Components,Rollup,我正在尝试使用Rollup.js捆绑一个主题包。主题包括一些全局样式,最相关的@font-face。我正在导入我的字体,并打算通过样式化组件注入它们 当我试图捆绑软件包时,Rollup会阻塞字体文件。我的假设是Webpack和Rollup可以互换使用,不是吗 这样做的正确方法是什么 控制台中出现错误: { SyntaxError: /Users/****/sites/vz-react/packages/Theme/fonts/NeueHaasGroteskDisplayBold.woff: Un
{ 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;��
...
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;
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;
globalStyles.js:
{ 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;��
...
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;
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;
在彻底的谷歌搜索之后,我找不到一种方法让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;��
...
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;
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;
另一种方法是将字体文件捆绑为base64字符串,使用: 然后像往常一样导入它们:
// 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;
}
`