問題 - Visual Studio Code 中的實時復雜功能 SCSS 到 CSS（背景圖片）

Question

我希望你能幫助我。 我正在使用 VS Code 和 Ritwick Dey 的“Live Sass 編譯器”。

我正在編寫一個網格並嘗試在 scss 中添加一個背景圖像來分隔項目。 其實沒有什么花哨的。

網格

例如：

 .item-2 {
                grid-area: assessTheRightTime;
                background-image: url(images/Weight\ loss.jpg);
                
            }

當我上傳所有圖像后保存時，我收到了錯誤通知。 所以實際上來自 scss 的代碼並沒有轉移到 css 工作表和瀏覽器。

當我轉到生成的 style.css 並直接將代碼行放在那里時，它會自動運行。

• btw 文件路徑是正確的

*更新：它適用於具有單一名稱的圖像，例如：“重量”。 如果圖像文件的名稱是“減肥”怎么辦？ scss 是否需要一些特定的語法？ 我在“體重和損失”之間添加了 %20 並且它有效。 它是強制性的還是有什么辦法？ 我的意思是這是怎么回事:)

背景圖片：url（圖片/ Weight%20loss .jpg）；

那么如何正確應用帶有空格字符的圖像名稱？ 我對基於 css 語法的 scss 感到困惑。

我錯過了什么嗎？ 我花了幾個小時試圖找出問題所在。 先感謝您：）

錯誤通知 VS 代碼

---

第二個問題：VS Code 在 CSS 工作表上顯示大量錯誤和警告是否正常，知道它是從 scss 編譯的？ 我知道 CSS 不接受 scss 生成的某些語法（例如方括號），但事實是什么？

錯誤和警告

謝謝你，馬切伊

Answer 1

1. 我認為它遇到了錯誤，因為您的文件名有空格。 它可能與缺少的撇號有關。 嘗試添加 "" 或 ''，例如 url("images/Weight loss.jpg")。 參考：w3schools.com/cssref/pr_background-image.asp
2. 至於第二個錯誤，可能是因為 linter。 您的項目的 linter 設置是什么？ 您是否已將 VSCode 配置為在保存時進行 lint/prettify？ github.com/prettier/prettier-eslint