ruby-on-rails - Rails Assets 管道不从第 3 方 css 框架编译字体

Question

问题

我正在使用语义 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 (Not Found)

背景

• Webpack 与 rails new --webpack:react 捆绑安装命令。
• 通过 yarn add semantic-ui-css 安装的语义 UI
• 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 管道。

Answer 1

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

为样式表创建一个包:

/app/javascript/packs/stylesheets.js

import 'semantic-ui-css/semantic';

然后在你的布局中(例如/app/views/layouts/application.html.erb):

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