如何在 Symfony 2 專案中正確引用 CSS 檔案中的資源？

Symfony 2 中CSS 檔案中資源的路徑

Symfony 2 提供了一種管理資源的機制，例如CSS 和映像檔，透過Assetic 組件。但是，在某些專案目錄結構中，在 CSS 中指定引用資源的正確路徑可能是一個挑戰。

問題概述

考慮以下目錄結構：

...
+-src/
| +-MyCompany/
|   +-MyBundle/
|     +-Resources/
|       +-assets/
|         +-css/
|           +-stylesheets...
+-web/
| +-images/
|   +-images...
...

在這種情況下，CSS 檔案位於/app/Resources/assets/ css 下，而影像位於/網路/影像。目標是從 CSS 檔案中引用這些圖像。

失敗的解決方案

第一個解決方案：絕對路徑

將CSS 檔案中的路徑變更為絕對URL 並不是一個可行的解決方案，因為應用程式可能不會總是在根目錄中運行

第二個解決方案：Assetic 與CSSrewrite 過濾器

將Assetic 與「cssrewrite」過濾器一起使用也會失敗，因為產生的程式碼不會產生指向images.

目前解：相對路徑

定義相對於CSS 檔案的影像路徑在生產環境中有效，但在開發環境中失敗。

工作解決方案

最有效的解決方案是將 CSS 檔案儲存在可公開存取的目錄中，並在部署期間重建 CSS。其運作原理如下：

1. 將 CSS 檔案移至 Resources/public/css。
2. 更新 Twig 範本以引用 public 目錄中的 CSS 檔案。
3. 使用 asset:install --symlink 指令在適當的位置建立指向公用 CSS 檔案的符號連結。
4. 在部署期間，刪除公用目錄中的原始 CSS 文件，僅保留符號連結。

透過此方法，CSS 檔案在部署期間重新編譯，確保它們包含映像的正確路徑。圖像本身仍然位於 web/images 目錄中，但使用者無法直接存取它們。

以上是如何在 Symfony 2 專案中正確引用 CSS 檔案中的資源？的詳細內容。更多資訊請關注PHP中文網其他相關文章！