ERB エンジンがラック gem を使用した CSS リンクで動作しない

概要

ラック gem と erb を使用してファイルを提供しようとしましたが、erb がレンダリングしている HTML ファイル内の CSS リンクタグが機能しません。

erb の実行とビューのレンダリングに使用されるヘルパー:

def render(file, *args)
    template = File.read("public/#{file}.html.erb") || 
    File.read("public/404.html.erb")
    template_output = ERB.new(template).result(binding)

    res = Rack::Response.new(bind_layout { template_output })
end

def bind_layout(&block)
    layout = File.read("public/layout.html.erb")
    ERB.new(layout).result(binding)
end

CSSインポートを使用したレイアウト:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheets/layout.css">
</head>
<body>
    <div class="main">
        <h1>ONM LAYOUT</h1>
        <%= yield %>
        <h2>onfoototer</h2>
    </div>
</body>
</html>

ページはテンプレートとレイアウトを正しく提供しますが、リンクされた CSS には当てはまりません

解決策

問題は、ラックがファイルを HTML として解釈し、バインドされた HTML ビューとともにすべてを提供していたことでした。私が見つけた解決策は、Rack::Static を使用して静的 CSS を適切に提供することでした。Rack::Static, :urls => [‘/static/stylesheets’, ‘layout.css’] を使用します。