Rails资源管道无法编译第三方CSS框架中的字体

Question

问题

我正在使用Semantic UI，开发时应用可以完美地呈现图标字体：

但在生产环境中无法正常工作：

错误详情

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

在生产环境中，我遇到了以下错误：

planetlauncher.herokuapp.com/:1 GET https://planetlauncher.herokuapp.com/assets/themes/default/assets/fonts/icons.woff planetlauncher.herokuapp.com/:1 GET https://planetlauncher.herokuapp.com/assets/themes/default/assets/fonts/icons.ttf 404 (未找到)

背景

• Webpack与rails new --webpack:react命令一起安装。
• Semantic UI通过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 Webpack依赖关系，我无法预编译资产，必须回退到heroku资产管道。

- Amin Shah Gilani

---

我可以看到这里发生了什么，我自己也遇到了同样的问题 - 任何在 node_modules 中被 CSS 引用的文件都不会起作用，因为它是通过例如 url('asset.css') 而不是 asset-url('asset.css') 进行引用的（后者将获取指纹化的 URL）。你找到解决这个问题的方法了吗？ - Sam Peacey

@SamPeacey 你说得对。我忘记更新这个问题，加入我得到的新信息了。我会处理的。 - Amin Shah Gilani

谢谢更新！为了解决这个问题，我最终选择通过webpacker编译它们，而不是使用资产管道。 - Sam Peacey

@SamPeacey，听起来很棒！你能把你的解决方案提交为这个问题的答案吗？我会接受你的答案，并且它将帮助很多未来的人。 - Amin Shah Gilani

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

- Sam Peacey

---

刚试了一下，出现了这个错误：Webpacker 在 /Users/my_user/Workspace/my_app/public/packs/manifest.json 中找不到 stylesheets.css。 - markhops

@markhops，我不确定你的设置是什么，但这些文件应该在app/javascript/packs中，我个人在/public中没有一个packs文件夹，manifest.json是一个Sprockets文件，通常位于app/assets中，而不是与webpack有关。据我所知。你的设置似乎有点问题。 - Sam Peacey

Answer 2

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

node_modules中的CSS不起作用，因为它是通过例如url('asset.css')而不是asset-url('asset.css')(这将得到指纹URL)引用的

-- Sam Peacy

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

没有修复的计划，也没有解决方法。这个问题也存在于任何不使用Rails助手并且不通过yarn安装的纯CSS库中。

-- Rafael France

- Amin Shah Gilani

Answer 3

我想你可能忘记编译你的资产了。所以，在生产环境中无法使用你的资产。

$ RAILS_ENV=production bin/rails assets:precompile

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

希望能有所帮助。

- hoangdd

---

虽然这通常可以工作，但在我的情况下不行。由于我的Webpack React应用程序，我需要Heroku管道来为我进行部署。 - Amin Shah Gilani