Rails资产管道没有从第三方css框架编译字体

Question

问题

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

​

​

但不要在生产中工作：

​

错误细节

在开发中，此文件可在：http://localhost:3000/assets/semantic-ui-css/themes/default/assets/fonts/icons.woff2上获得。

在production中，我得到以下错误：

获取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)$/

而且，我不能预编译资产，而且必须退回到heroku资产管道，因为我的反应是依赖web包。

Answer 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' %>

Answer 2

我想你可能忘了整理你的资产。因此，您的资产在生产环境中不可用。

$ RAILS_ENV=production bin/rails assets:precompile

预编译-资产

希望能帮上忙。

Answer 3

原来这是个众所周知的问题。其中一条评论最好地解释了这一点：

node_modules中的css将无法工作，因为它是由url('asset.css')引用的，而不是资产-url(‘asset.css’)(这将得到指纹的url)。 -- 萨姆·佩西

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

没有修复的计划，也没有解决的办法。这个问题也存在于任何不使用rails助手且不通过yarn安装的纯css库中。 -- 法国拉斐尔