小编Gam*_*mmi的帖子

我已经创建了 React 应用程序，我需要为其他网站生成嵌入代码。这是一个大型应用程序，我只想将一个组件作为其他域的小部件。我已阅读使用 React 和 Webpack 编写可嵌入的 Javascript 插件以及如何将React组件嵌入其他域？. 我设置了我的 webpack，但仍然无法在另一个域上呈现小部件。

这个小部件应该：

1. 可以通过<script>标签获得，而不是 iframe
2. 只显示应用程序的一部分（路径/referral），而不是所有应用程序

小部件是一个按钮和弹出窗口，通过单击按钮显示。

这是我webpack.config.js的client文件夹：

const path = require('path');
const bundleOutputDir = './referral';
const env = require('yargs').argv.env;

module.exports = env => {
  const isDevBuild = !(env && env.prod);

  if (env === 'build') {
    mode = 'production';
  } else {
    mode = 'development';
  }

  return [
    {
      mode: mode,
      entry: './src/components/early-referrals/Referral.js',
      output: {
        filename: 'widget.js', …

我无法在弹出窗口中添加 Font Awesome 图标。请帮我弄清楚它是如何工作的。我不知道如何在 CSS 中添加图标和更改颜色。

这是 HTML

<i class="fas fa-check-circle">

这是CSS：

.fa-check-circle {color: #ffffff;}

怎么了？它不起作用。我看不到弹出窗口中的图标。 这是我的别针