相关疑难解决方法(0)

我是 webpack 的新手，我正在尝试按照本教程https://medium.com/@mushti_dev/hey-e6faa20b910a将自定义字体加载到 stroybook v4 中

工作区结构如下所示（create-react-app + Storybook）

my-project/
  .storybook
     config.js
     preview-hrad.html
     webpack.config.js
  fonts
    MyCustomFont.woff
  src
    components
       Title.js
    containers
    styles
       MyCustomFont.woff
    index.js
  stories

从src中的styles文件夹加载字体时，配置如下：

webpack.config.js

my-project/
  .storybook
     config.js
     preview-hrad.html
     webpack.config.js
  fonts
    MyCustomFont.woff
  src
    components
       Title.js
    containers
    styles
       MyCustomFont.woff
    index.js
  stories

预览-head.html

const path = require('path');

module.exports = async ({ config }) => {
  // fonts
  config.module.rules.push({
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    use: [
      {
        loader: 'file-loader',
        query: {
          name: '[name].[ext]',
        }
      }
    ],
    include: path.resolve(__dirname, '../')
  });

  return config;
}; …