Rails 资产管道不从第 3 方 css 框架编译字体

Question

问题

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

但不要在生产中工作：

错误详情

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

在 production 中，我得到这些错误：

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 (Not Found)

背景

Webpack 与 rails new --webpack:react 命令捆绑安装。
语义 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)$/

此外，我无法预编译 assets，并且由于我对 react web pack 的依赖，必须回退到 heroku assets pipeline。

Answer 1

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

$ RAILS_ENV=production bin/rails assets:precompile

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

希望对您有所帮助。

Answer 2

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

css in node_modules will not work because it's referenced by for example url('asset.css') rather than asset-url('asset.css') (which would get the fingerprinted url)

--

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

No plans to fix, neither workarounds. This problem also exists with any pure css libraries that don't use rails helpers and are not installed via yarn.

-- Rafael France

Answer 3

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

为样式表创建一个包：

/app/javascript/packs/stylesheets.js

import 'semantic-ui-css/semantic';

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

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

Rails 资产管道不从第 3 方 css 框架编译字体

Rails asset pipeline not compiling fonts from 3rd party css framework

ruby-on-rails

asset-pipeline

问题

错误详情

背景