单独的 SVG 文件出现在开发中，但没有出现在生产 React + Webpacker 应用程序中

问题描述

我的 Rails/React/Webpacker 应用中的一个组件导入了一堆 svg 文件，如下所示：

import AppleIcon from 'images/fruit_icons/apple_icon.svg';
import BananaIcon from 'images/fruit_icons/banana_icon.svg';
import StrawBerryIcon from 'images/fruit_icons/strawBerry_icon.svg';

该组件在本地成功渲染了所有图标，但在生产中没有。这很古怪。重复一遍：所有图标都在生产环境中成功呈现除了 BananaIcon.svg 图像。以下是组件如何使用 svg's html 元素呈现 <img/>：

                <img src={AppleIcon} />

需要说明的是：所有 svg 文件都以完全相同的方式（来自同一个库存照片库）提取并导入到应用程序中。 banana_icon.svg 文件没有什么奇怪或独特的地方会让我相信它在生产中会出现渲染问题，所以我完全感到困惑。

以下是有关该应用的更多信息：

1. 我使用 Webpacker ruby​​ gem 来编译资产。
2. 这是一个危险信号：production 中的 assets/packs/fruit_icons 目录的内容与我的 中完全相同的目录中出现的内容不同本地环境。在本地，我看到 banana_icon.svg 目录中的 assets/packs/fruit_icons 文件。但是，我在 production's assets/packs/fruit_icons 目录中没有看到该文件。但是我在 production 目录中看到了所有其他 svg 文件（apple_icon.svg 和 strawBerry_icon.svg）。

Webpacker 和资产管道以及处理编译资产的所有代码有时会令人困惑，因此请在回复中详细而彻底。提前致谢！

这是我的 webpacker.yml 文件的内容：

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: assets/packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets','engine/foo/app/assets']
  resolved_paths: [
    'app/assets','app/javascript',]

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .jsx
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json,yarn.lock,and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）