新手问题 Rails 6.0 webpacker 生产环境下 fontawesome 图标不显示

gxlonline · October 13, 2019 · Last by gxlonline replied at October 14, 2019 · 3521 hits

开发环境下一切正常,部署到生产环境 fontawesome 图标不显示,js 和 css 文件加载正常的。

升级到 rails6+webpacker 不是太懂,搜索了好几天,也没解决问题。请指导一下,谢谢。

Gemfile

ruby '2.6.2'
gem 'rails', '~> 6.0.0'
gem 'webpacker', '~> 4.0'

webpacker/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';
@import 'bootstrap_custom';

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';

config\webpacker.yml

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

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

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

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

  # Extract and emit a css file
  extract_css: true

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

  extensions:
    - .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: true
    # 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
    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

config\webpack\environment.js

const { environment } = require('@rails/webpacker')

module.exports = environment

const webpack = require('webpack')
environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    })
)

mina deploy 时的提示

yarn install v1.19.1
warning ../../package.json: No license field
warning ../../../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0".
warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^4.0.0".[4/4] Building fresh packages...
Done in 8.88s.
       Compiling…

看我的帖子和参考项目:https://ruby-china.org/topics/38214

@jasl 感谢回复

经过尝试,注释掉 CDN 的配置,图标就能显示。

# config/environmentsproduction.rb
config.action_controller.asset_host = 'https://assets.xxx.com'

CDN 是阿里云的,同样的配置在 Rails5+Sprockets+bootstrap3 下能正常显示。

CDN 设置 Access-Control-Allow-Origin 跨域请求,图标可以显示了。谢谢。

gxlonline closed this topic. 14 Oct 10:11
gxlonline closed this topic. 14 Oct 10:11
You need to Sign in before reply, if you don't have an account, please Sign up first.