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命令捆绑在一起。
• 通过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

原来这是一个已知问题。其中一条评论最能说明这一点：

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

     

- Sam Peacy

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

  

没有计划修复，也没有解决方法。任何不使用rails helper且未通过yarn安装的纯css库也存在此问题。

     

- Rafael France