使用Rack gem与ERB引擎时CSS链接无法生效的问题

问题核心 #

你的Rack应用目前只实现了ERB模板的渲染逻辑，但没有配置静态文件服务。当浏览器请求stylesheets/layout.css时，服务器无法正确返回该静态资源，导致CSS加载失败。

解决步骤 #

1. 确认目录结构 #

确保你的项目文件结构符合规范，示例如下：

项目根目录/
├── public/
│   ├── stylesheets/
│   │   └── layout.css
│   ├── layout.html.erb
│   └── 你的业务模板.html.erb
└── config.ru （Rack入口文件）

2. 添加静态文件服务中间件 #

使用Rack自带的Rack::Static中间件处理静态资源请求，在config.ru中配置：

require './你的应用主文件'

# 配置静态资源服务：处理/stylesheets路径下的文件，根目录指向public
use Rack::Static,
  urls: ['/stylesheets'],
  root: 'public'

run YourApp.new

3. 避免路由拦截静态请求 #

如果你的应用有自定义路由逻辑，要确保静态资源请求不会被ERB渲染逻辑拦截。在应用的call方法里优先处理静态请求：

class YourApp
  def call(env)
    request = Rack::Request.new(env)
    
    # 优先处理静态资源请求
    if request.path.start_with?('/stylesheets/')
      @static_app.call(env)
    else
      # 处理ERB模板渲染
      render('你的模板名').finish
    end
  end

  def initialize
    # 初始化静态服务中间件
    @static_app = Rack::Static.new(
      lambda { |env| [404, {}, ['Not Found']] },
      urls: ['/stylesheets'],
      root: 'public'
    )
  end

  # 保留你原有的render和bind_layout方法
  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
end

4. 验证CSS路径正确性 #

确保HTML中的CSS路径使用绝对路径（开头加/）：

<link rel="stylesheet" href="/stylesheets/layout.css">

这样无论当前页面的URL是什么，浏览器都会从项目根路径请求CSS文件，避免路径错误。

内容的提问来源于stack exchange，提问作者wnccys