css - Rails - 在 Rails 4 应用程序的供应商 css 中使用供应商字体 - Assets 管道

Question

我正在尝试弄清楚如何调整一个 wrap bootstrap 主题以便在 Rails 4 中使用。

主题使用简单的线条图标。我尝试将这些文件移动到我的 app/assets 文件夹中的字体文件夹以及我的 vendor/assets/css 文件夹中的 css 文件和我的 vendor/assets/javascript 文件夹中的 js 文件夹。

我不明白如何重写 css 中的路径，以便以一种让 Rails 读取它们的方式引用 Assets 。

例如，其中一个 css 文件包含以下内容:

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

我知道 url(../.. 部分是 rails 的问题。我想不通的是如何解决它。

我在生产环境中安装了 rails-12factor gem。我已经尝试了上百万种变体(在 Rails 指南中显示)，但我找不到任何有效的方法。

谁能看到要做什么？

本文建议不要在引用供应商 Assets 字体文件中包含“字体”文件夹。 https://gist.github.com/iamatypeofwalrus/6467148

我试过包括和排除它，但两种方法都行不通。

这篇文章表明供应商文件无法在不修改初始化程序的情况下存储字体。我试过了，但它也不起作用。 Using fonts with Rails asset pipeline

Rails.application.config.assets.paths
 => ["/Users/cf3/app/assets/images", "/Users/cf3/app/assets/javascripts", "/Users/cf3/app/assets/stylesheets", "/Users/cf3/vendor/assets/fonts", "/Users/cf3/vendor/assets/javascripts", "/Users/cf3/vendor/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/underscore-rails-1.8.3/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/gmaps4rails-2.1.2/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/images", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chartkick-1.4.1/app/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/formtastic-2.2.1/app/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/images", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/dependent-fields-rails-0.4.2/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/cocoon-1.2.6/app/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.0.5/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/coffee-rails-4.1.0/lib/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/momentjs-rails-eda1b74512db/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/stylesheets", "Rails/vendor/assets/fonts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/fonts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/images", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/fonts"] 

HEROKU

我现在找到了这篇文章，它表明为了在生产中符合 heroku，我需要用 Assets 路径助手替换所有内容并重命名文件以将 .erb 添加到图像和 css 以及将 .coffee 添加到 js。在我这样做之前，有人可以确认这确实是必需的，以及我将如何更改上述 css 文件以符合 heroku 要求。

http://joanswork.com/wrapbootstrap-theme-to-rails/

Answer 1

Actually any sub-directory added to assets directory is auto added to the load paths. Files in those directories can be accessed as normal asset files.

If you have

vendor/assets/fonts/Simple-Line-Icons.eot

then vendor/assets/fonts/ should be added to load paths.

然后您可以将所有字体文件添加到您的 css 文件中，路径为:font/file_name

请记住在此之后重新启动服务器，因为加载路径将在重新启动服务器后重新加载。

您可以通过以下命令通过 rails console 查看加载路径列表:

Rails.application.config.assets.paths

您可以通过以下命令添加新的加载路径:

config.assets.paths << Rails.root.join("vendor", "assets", "fonts")
OR to autoload : config.autoload_paths << Rails.root.join("vendor", "assets", "fonts")