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

The Problem

I'm using Semantic UI, the app renders icon fonts perfectly in development:

我正在使用语义UI，这个应用在开发中完美地呈现图标字体:

But don't work in production:

但不要在生产中工作:

Error Details

In development, this file is available at: http://localhost:3000/assets/semantic-ui-css/themes/default/assets/fonts/icons.woff2

在开发中，这个文件可以访问:http://localhost:3000/assets/ seman-ui -css/theme /default/assets/font /icons.woff2

In production, I get these errors:

在生产中，我有以下错误:

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)

获取https://planetlauncher.herokuapp.com/assets/themes/default/assets/fonts/icons.woff planetcher.herokuapp.com/:1获取https://planetlauncher.herokuapp.herokuapp.com/assets/themts/themes/themes/default/default/ts/font/default/iconts/font/ts/fonts/not/ts/

Background

Webpack was installed bundled with the rails new --webpack:react command.
Webpack与rails new——Webpack:react命令绑定在一起。
Semantic UI installed via yarn add semantic-ui-css
通过纱线安装的语义UI添加了语义- UI -css
Application.css includes:
*= require 'semantic-ui-css/semantic.min.css
应用程序。css包括:*=要求' seman- ui-css/semantic.min.css
assets.rb includes:
Rails.application.config.assets.paths << Rails.root.join('node_modules') Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
资产。rb包括:Rails.application.config.assets。路径< < Rails.root.join Rails.application.config.assets(“node_modules”)。预编译< < / \。(?:svg |测试结束woff | | ttf)/美元

Also, I cannot precompile assets and must fallback to the heroku assets pipeline because of my react web pack dependence.

此外，由于我的response web pack依赖关系，我不能预编译资产，必须退回到heroku资产管道。

3 个解决方案

#1

I got around this by compiling the assets with webpack - you're already using webpack, so it shouldn't be a big deal.

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

Create a pack for the stylesheets:

为样式表创建一个包:

/app/javascript/packs/stylesheets.js

/应用程序/ javascript /包/ stylesheets.js

import 'semantic-ui-css/semantic';

Then in your layout (/app/views/layouts/application.html.erb for example):

然后在布局(/app/视图/布局/application.html)中。例如erb):

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

#2

I think maybe you forgot compile your assets. So, your assets is not available in production enviroment.

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

$ RAILS_ENV=production bin/rails assets:precompile

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

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

Hope it helps.

希望它可以帮助。

#3

Turns out this is a known issue. One of the comments explains this best:

事实证明这是一个已知的问题。其中一个评论解释了这一点:

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)

node_modules中的css不能工作，因为它是由url('asset.css')引用的，而不是资产url('asset.css')(这会得到指纹url)

-- Sam Peacy

——山姆Peacy

I also posted this as an issue to rails/rails, and this doesn't seem to be something Rails is going to fix:

我还把这个问题发布到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.

没有修复计划，也没有解决办法。这个问题也存在于任何纯css库中，这些库不使用rails helper，也不通过纱线安装。

-- Rafael France

法国——拉斐尔

#1