Phoenix 1.7如何在生产环境内联编译后CSS并兼容开发环境？

核心思路 #

通过判断运行环境，在开发环境保留原有的<link>标签加载CSS（支持热重载），在生产环境读取编译后带指纹的CSS文件内容，内联到<style>标签中。

实现步骤 #

1. 添加视图助手函数（推荐）

在你的Web模块（比如lib/your_app_web.ex）中，新增一个用于获取内联CSS内容的助手函数，自动处理环境判断和文件路径：

defmodule YourAppWeb do
  # 保留原有代码...

  def inline_css do
    if Mix.env() == :prod do
      # 获取带指纹的CSS资源Web路径
      css_web_path = Phoenix.Static.static_path(YourAppWeb.Endpoint, "/assets/app.css")
      # 拼接为服务器本地的绝对文件路径
      local_file_path = Path.join(:code.priv_dir(:your_app), "static#{css_web_path}")

      # 读取文件内容，失败时返回空字符串避免页面报错
      case File.read(local_file_path) do
        {:ok, content} -> content
        {:error, _} -> ""
      end
    else
      nil
    end
  end
end

注意：将:your_app替换为你的实际应用名，YourAppWeb.Endpoint替换为项目的Endpoint模块。

2. 修改root.html.heex模板

在lib/your_app_web/templates/layout/root.html.heex中，根据环境分支渲染不同的CSS加载方式：

<%= if Mix.env() == :prod do %>
  <style><%= YourAppWeb.inline_css() %></style>
<% else %>
  <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<% end %>

关键细节说明 #

• 为什么之前的File.read!("app.css")无效？
  开发环境下CSS文件实际位于priv/static/assets/app.css，生产环境下会被编译为带哈希指纹的文件名（如app-abc123.css），直接写死文件名或相对路径会导致找不到文件。

• 如何确保生产环境能读取到正确的文件？
  Phoenix.Static.static_path/2会自动读取生产环境的cache_manifest.json文件（由mix assets.deploy生成），返回带指纹的正确资源路径，避免缓存问题的同时保证文件路径准确。

• 开发环境保留<link>的原因
  开发环境中Phoenix的文件监听服务会实时编译CSS，phx-track-static属性能自动检测资源变化并刷新页面，比直接读取文件更适合开发流程。

验证方式 #

• 开发环境启动服务：mix phx.server，查看页面源码确认是<link>标签加载CSS。
• 生产环境编译并启动：先执行mix assets.deploy && mix phx.digest，再启动服务，查看页面源码确认CSS已内联到<style>标签中。

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