Rails 资产管道：自定义字体未加载（已编译 CSS 中的哈希未附加到文件名）

Question

我有以下 SASS 代码来加载自定义字体：

@font-face
  font-family: 'Fredericka the Great'
  font-style: normal
  font-weight: 400
  src: local('Fredericka the Great'), local('FrederickatheGreat'), asset-url('assets/fredericka_the_great.woff2') format('woff2')
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215

在开发中，加载正常。

在我的一台服务器上，它没有。仔细查看生成的代码，我注意到在编译后的 CSS 中，应该加载 woff 文件的位置没有附加哈希值：

@font-face{
  font-family:"Fredericka the Great";
  font-style:normal;
  font-weight:400;
  src:local("Fredericka the Great"),local("FrederickatheGreat"),url(/assets/fredericka_the_great.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}

如您所见，编译后的代码生成 url(/assets/fredericka_the_great.woff2)，而在服务器上，部署的资产如下所示：

所以在我看来，CSS 应该产生 url(/assets/fredericka_the_great-49badd2a1e856a1d9e3a6cb6189f0426bda9f2b292376395758419c2d0c631b6.woff2)。事实上，尝试手动加载文件是可行的：

但有趣的是，在其他一些服务器上，同一个应用程序按预期工作（这看起来很奇怪，因为 CSS 也缺少哈希）！

（要进一步 CSS 检查，请转至 https://audit.uber.space/assets/application-9e5ba30be64b818da5468c9b39dc20aafa0ce523315d3e6684b96d11e336f603.css - or, funnily enough, just https://audit.uber.space/assets/application.css）

让我非常怀疑的是，当我将服务器上的 woff 文件重命名为完全不同的名称时，网站仍在加载该文件。所以可能服务器甚至不发送编译的 woff 文件，而是一些完全不同的 woff 文件（可能直接来自 gem 目录或其他东西）...?

我不确定现在如何继续，因为我不知道预期的行为是什么，也不知道如何修复我的部署。

为了完整起见，这是我的部署配置（我使用 mina）：

$ mina -d

------- Printing current config variables -------
:debug_configuration_variables => true
:port => 22
:releases_path => #<Proc:0x007fc881157470@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-1.2.3/tasks/mina/deploy.rb:3 (lambda)>
:shared_path => #<Proc:0x007fc881157380@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-1.2.3/tasks/mina/deploy.rb:4 (lambda)>
:current_path => #<Proc:0x007fc8811572b8@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-1.2.3/tasks/mina/deploy.rb:5 (lambda)>
:lock_file => "deploy.lock"
:deploy_script => "data/deploy.sh.erb"
:keep_releases => 5
:version_scheme => :sequence
:execution_mode => :pretty
:bundle_bin => "bundle"
:bundle_path => "vendor/bundle"
:bundle_withouts => "development test"
:bundle_options => #<Proc:0x007fc8802da898@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-1.2.3/tasks/mina/bundler.rb:6 (lambda)>
:shared_dirs => ["vendor/bundle", "log", "tmp/cache", "public/assets", "public/uploads", "tmp/sockets", "tmp/pids"]
:rails_env => "production"
:bundle_prefix => #<Proc:0x007fc8802cbeb0@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-1.2.3/tasks/mina/rails.rb:5 (lambda)>
:rake => #<Proc:0x007fc8802bbb50@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-1.2.3/tasks/mina/rails.rb:6 (lambda)>
:rails => #<Proc:0x007fc8802bb970@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-1.2.3/tasks/mina/rails.rb:7 (lambda)>
:compiled_asset_path => "public/assets"
:asset_dirs => ["vendor/assets/", "app/assets/"]
:migration_dirs => ["db/migrate"]
:branch => "master-nine"
:remove_git_dir => true
:remote => "origin"
:git_not_pushed_message => #<Proc:0x007fc88021ab10@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-1.2.3/tasks/mina/git.rb:6 (lambda)>
:web_server => :puma
:puma_role => #<Proc:0x007fc8800e7a90@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:7 (lambda)>
:puma_env => #<Proc:0x007fc8800e77c0@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:8 (lambda)>
:puma_config => #<Proc:0x007fc8800e7590@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:9 (lambda)>
:puma_socket => #<Proc:0x007fc8800e73d8@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:10 (lambda)>
:puma_state => #<Proc:0x007fc8800e7248@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:11 (lambda)>
:puma_pid => #<Proc:0x007fc8800e7108@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:12 (lambda)>
:puma_cmd => #<Proc:0x007fc8800e6e10@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:13 (lambda)>
:pumactl_cmd => #<Proc:0x007fc8800e6d20@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:14 (lambda)>
:pumactl_socket => #<Proc:0x007fc8800e6988@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:15 (lambda)>
:puma_root_path => #<Proc:0x007fc8800e65c8@/Users/josh/.rvm/gems/ruby-2.4.1@XXX/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:16 (lambda)>
:rvm_use_path => "$HOME/.rvm/scripts/rvm"
:application_name => "A4AA 2.0"
:domain => "zugangfueralle01.nine.ch"
:deploy_to => "XXX"
:repository => "XXX"
:user => "www-data"
:forward_agent => true
:puma_port => 3006
:shared_files => ["config/secrets.yml"]

Answer 1

我运行几个月前也遇到过同样的问题，你有很多事情要做。我是这样解决的：

1.- 路线，先到先得。最好的方法是保存到 app -> assets -> fonts (You create this folder)。然后，我建议以可读的方式在其中添加您的字体文件 (.woff)。

2.- SASS 我特别需要将此代码添加到我的 application.scss 或 custom.scss

@font-face {
    font-family: 'Theola Kids Regular';
    font-style: normal;
    font-weight: normal;
    src:font-url('theola-kids.woff');
    src:font-url('theola-kids.woff') format('woff');
}

注意到 src:font-url，它告诉 rails 查找特定的字体文件。我有两个，一个是路由，一个是路由格式文件。

3.- 管道

一定要在application.rb文件中添加"fonts" 示例：config.assets.paths << Rails.root.join("app", "assets", "fonts") 完成后重新启动您的 rails 服务器并检查它。它必须与此解决方案一起使用。

有关更多详细信息，我强烈推荐这篇文章： https://gist.github.com/anotheruiguy/7379570

祝你好运！

Rails 资产管道：自定义字体未加载（已编译 CSS 中的哈希未附加到文件名）

Rails asset pipeline: custom font does not load (hash not appended to file name in compiled CSS)

deployment

ruby-on-rails

custom-font

asset-pipeline