Rails 资产管道未从 3rd 方 css 框架编译字体答案

【问题标题】：Rails asset pipeline not compiling fonts from 3rd party css frameworkRails 资产管道未从 3rd 方 css 框架编译字体
【发布时间】：2017-11-26 08:23:42
【问题描述】：

问题

我正在使用语义 UI，该应用在开发中完美呈现图标字体：

但不要在生产中工作：

错误详情

在开发中，此文件位于： http://localhost:3000/assets/semantic-ui-css/themes/default/assets/fonts/icons.woff2

在生产中，我收到以下错误：

planetlauncher.herokuapp.com/:1 获取 https://planetlauncher.herokuapp.com/assets/themes/default/assets/fonts/icons.woff planetlauncher.herokuapp.com/:1 获取 https://planetlauncher.herokuapp.com/assets/themes/default/assets/fonts/icons.ttf 404（未找到）

背景

Webpack 与 rails new --webpack:react 命令捆绑安装。
通过yarn add semantic-ui-css 安装的语义用户界面
Application.css 包括：
*= require 'semantic-ui-css/semantic.min.css
assets.rb 包括：
Rails.application.config.assets.paths << Rails.root.join('node_modules') Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

另外，由于我的 react web pack 依赖，我无法预编译资产并且必须回退到 heroku 资产管道。

【问题讨论】：

我可以看到这里发生了什么，我自己也有同样的情况——node_modules 中的 css 引用的任何文件都将不起作用，因为它是由例如 url('asset.css') 而不是 asset-url('asset.css') 引用的（这将获取指纹网址）。你找到解决办法了吗？
@SamPeacey 你是对的。我忘了用我得到的新信息更新这个问题。就可以了
感谢您的更新！为了自己解决这个问题，我最终只是通过 webpacker 编译它们，而不是使用资产管道
@SamPeacey 听起来棒极了！你能提交你的解决方案作为这个问题的答案吗？我会接受你的，它会帮助很多未来的人。

标签： ruby-on-rails asset-pipeline

【解决方案1】：

我通过使用 webpack 编译资产解决了这个问题 - 你已经在使用 webpack，所以应该没什么大不了的。

为样式表创建一个包：

/app/javascript/packs/stylesheets.js

import 'semantic-ui-css/semantic';

然后在你的布局中（例如/app/views/layouts/application.html.erb）：

<%= stylesheet_pack_tag "stylesheets", :media => 'all' %>

【讨论】：

刚试过这个并得到这个错误：Webpacker can't find stylesheets.css in /Users/my_user/Workspace/my_app/public/packs/manifest.json
@markhops，我不确定你的设置是什么，但这些文件应该在app/javascript/packs，我个人在/public 中没有packs 文件夹，manifest.json 是一个 sprockets 文件，通常位于app/assets，与 webpack 无关。据我所知。您的设置听起来有点奇怪。

【解决方案2】：

原来这是一个已知问题。其中一个 cmets 最好地解释了这一点：

node_modules 中的 css 将不起作用，因为它被例如 url('asset.css') 而不是 asset-url('asset.css') 引用（这将获得指纹 url）

-- Sam Peacy

我还将此作为 issue 发布到 rails/rails，这似乎不是 Rails 将要解决的问题：

没有修复计划，也没有变通方法。这个问题也存在于任何不使用 rails 助手并且不是通过yarn 安装的纯 css 库。

-- Rafael France

【讨论】：

【解决方案3】：

我想也许你忘了编译你的资产。因此，您的资产在生产环境中不可用。

$ RAILS_ENV=production bin/rails assets:precompile

http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

希望对你有帮助。

【讨论】：

虽然这通常可行，但在我的情况下却不行。由于我的 webpack react 应用程序，我需要 Heroku 管道为我进行部署。