在 scss/css 中的圖像名稱中使用 #（井號標簽）

Question

好的，假設我有一個名為 test#1234.png 的圖像，同時嘗試將其導入為：

background: url('./assets/test#1234.png')

我會收到這個錯誤：

未找到模塊：錯誤：無法解析“./assets/test”

所以它甚至不會讀出錯誤中的整個名稱，我嘗試過像 test/#1234 這樣轉義標簽，也像 test%231234 那樣對它進行百分比編碼，但仍然沒有運氣，任何人都知道什么可以解決這個問題問題？

注意：任何其他不包含主題標簽的文件名都有效。

Answer 1

這個錯誤似乎不是由 SASS 引起的。 運行sass命令行工具來編譯帶有標簽的單個 SCSS 文件可以正常工作。 一般來說，SASS 不會檢查文件系統來嘗試解析路徑，它只處理語法。 “找不到模塊”錯誤是由您的構建過程觸發的，可能是 React。

Answer 2

hashtag 是 URI 的保留字符（表示片段）。

根據RFC 3986第 2.2 節，保留字符為：

 reserved = gen-delims / sub-delims gen-delims = ":" / "/" / "?" / "#" / "[" / "]" / "@" sub-delims = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="

而且，重要的是：

如果 URI 組件的數據與保留字符作為分隔符的用途發生沖突，則必須在形成 URI之前對沖突數據進行百分比編碼。

hastag 的百分比編碼是%23 ，所以不是
background: url('./assets/test#1234.png')

您將尋找目標：
background: url('./assets/test%231234.png')