Fontastic字体图标在Storybook正常，引入React项目后失效如何修复？

组件使用方式 #

• 在Storybook中可通过两种方式调用Icon组件：

  <Icon iconName="user" />
  ...or
  <UserIcon />
  

Storybook中的正常表现 #

• 渲染后的DOM结构：

  <i className="icon-user ...">
    ::before
  </i>
  

• 对应的生效样式：

  .icon-user:before {
    content: "\79";
  }
  

独立React项目中的异常表现 #

组件可正常加载，但图标无法显示，DOM结构缺失伪元素：

<i className="icon-user ...">
</i>

.icon-user:before 对应的样式未出现在DOM中，完全不生效。

相关配置文件信息 #

.storybook/preview.js（预览配置） #

import '../src/main.css';

export const parameters = {
  actions: { argTypesRegex: '^on.*' },
  options: {
    storySort: {
     order: ['Icon', 'Controls', '*'],
     // method: 'alphabetical',
    },
  },
};

.storybook/main.js（主配置） #

module.exports = {
  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    }
  ],
  typescript: {
    check: true, // type-check stories during Storybook build
  },
  staticDirs: ['../public'],
}

.storybook/preview-head.html #

<link rel="stylesheet" href="../public/styles.css" />

src/main.css #

@import '../public/styles.css';

public文件夹结构 #

> fonts
icons-reference.html
styles.css

styles.css核心内容 #

@font-face {
  font-family: "icons";
  src:url("fonts/icons.eot");
  src:url("fonts/icons.eot?#iefix") format("embedded-opentype"),
    url("fonts/icons.woff") format("woff"),
    url("fonts/icons.ttf") format("TrueType"),
    url("fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

...

.icon-user:before {
  content: "\79";
}

React项目中组件调用方式 #

<UserIcon />

内容的提问来源于stack exchange，提问作者Mar Nii