如何在Firebase多站点间共享CSS并批量部署更新？

核心思路 #

将公共CSS文件统一放在独立共享目录，通过Firebase Hosting的规则配置，让所有站点都能访问该目录下的CSS，实现一次修改、全站点同步更新。

具体操作步骤 #

1. 调整目录结构 #

把原本分散在各站点目录的CSS文件，迁移到公共共享目录。调整后的目录结构如下：

public/
├── folder-1/          # 站点1的专属文件
│   └── index.html
├── folder-2/          # 站点2的专属文件
│   └── index.html
└── shared/
    └── css/
        └── main.css   # 所有站点共用的CSS文件

2. 修改firebase.json配置 #

在每个站点的配置项中添加rewrites规则，实现对公共CSS路径的定向访问：

{
  "hosting": [
    {
      "target": "hosting-site-1",
      "public": "public/folder-1",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "/css/**",
          "destination": "/../shared/css/$1"
        }
      ]
    },
    {
      "target": "hosting-site-2",
      "public": "public/folder-2",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "/css/**",
          "destination": "/../shared/css/$1"
        }
      ]
    }
  ]
}

3. 页面引用公共CSS #

在各站点的HTML文件中，直接使用统一路径引用公共CSS：

<link rel="stylesheet" href="/css/main.css">

4. 部署验证 #

执行部署命令，Firebase会自动识别rewrites规则，确保所有站点正确加载公共CSS：

firebase deploy --only hosting:hosting-site-1,hosting:hosting-site-2

后续修改public/shared/css/main.css后，重新部署所有站点即可实现样式全同步。

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