导入字体以使用 webpack 和样式化组件对项目做出反应

Question

我正在尝试从我使用 webpack 和样式化组件的 React 项目中的本地资源导入字体。我有一个包含以下代码的字体文件夹：

import { css } from 'styled-components';
import { fontWeight } from './vars';

export const fontFaces = css`
  @font-face {
    font-family: 'OurFont';
    src: url('/resources/fonts/OurFont-Bold.woff2') format('woff2');
    font-weight: ${fontWeight.bold};
    font-style: normal;
  }
`;

然后我有一个全局样式文件：

import { createGlobalStyle } from 'styled-components';
import { fontFaces } from './fonts';

export const GlobalStyles = createGlobalStyle`
  ${fontFaces}
`;

在我的应用程序组件中，我像这样使用样式组件中的 ThemeProvider（为简洁起见，此处省略了一些不相关的代码）：

import { ThemeProvider } from 'styled-components';

class App extends React.Component {
render() {
  return (
    <ThemeProvider theme={{ theme }}>
      <GlobalStyles />
      <AppHeader />
      <AppNavigator />       
    </ThemeProvider>
  );
}}

以及来自 webpack 的相关代码：

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            limit: 10000,
            mimetype: 'application/font-woff',
          },
        },
      ],
    },

我尝试遵循 this thread but it does not seem to work for me as I get an error in the console which says GET http://localhost:5001/resources/fonts/OurFont-Bold.woff2 net::ERR_ABORTED 404（未找到）的建议。

有谁知道我做错了什么或者是否有其他方法？谢谢！

Answer 1

您可以通过在您的 JS 中导入字体并将其传递给您的样式化组件来解决这个问题 css 模板标签：

import { css } from 'styled-components';
import { fontWeight } from './vars';

import myFontURL from '../../mypath/fonts/OurFont-Bold.woff2';

export const fontFaces = css`
  @font-face {
    font-family: 'OurFont';
    src: url(${myFontURL}) format('woff2');
    font-weight: ${fontWeight.bold};
    font-style: normal;
  }
`;

请务必不要使用 /resources/fonts/OurFont-Bold.woff2，而是使用当前文件目录的相对路径。

Answer 2

遇到同样的问题并尝试了上述解决方案，但它不起作用，我收到错误消息： Cannot find module '../fonts/Roboto-BlackItalic.ttf'

我使用的是打字稿，所以我需要添加某种导出才能对那种路径使用导入语句吗？

编辑：通过将 declare module "*.ttf"; 添加到我的 typings.d.ts 文件并删除格式 ("ttf") in src: url(${fontUrl}) format("ttf"); in @font-face

来解决

导入字体以使用 webpack 和样式化组件对项目做出反应

Import fonts to react project with webpack and styled components

reactjs

webpack-2

styled-components