錯誤 get-function rgba-css-var is not a valid value for background-color

Question

我已按照以下步驟在 ASPNET Core 項目中設置 Bootstrap 5 SASS。

1. 右鍵單擊wwwroot並選擇Add->Client-Side Library 。 選定的 unpkg 提供程序， bootstrap@5.1.3 @5.1.3 庫。
2. 創建了一個名為main.scss的文件
3. 從bootsrap中的 bootsrap 導入以下內容

main.scss的內容是：

@import "../lib/bootstrap/scss/bootstrap";

4. 右鍵main.scss文件，選擇Web Compiler->Compile file，文件編譯成功，生成main.min.css和main.css
5. 通過添加<link href="~/css/main.css" rel="stylesheet" />修改_Layout.cshtml

加載頁面時，未正確生成 CSS。 bg-dark或bg-light在background-color中顯示無效值。

同樣在視覺工作室中，來自同一個文件main.css的 75 個警告。

Answer 1

我參考了此答案中提到的步驟，發現經過一些更改后它開始工作。

注意：我使用的是 Visual Studio 2022，並且我使用 .net core 6.0 版本創建了一個 Asp.Net 核心項目。

以下是使其工作的步驟。

1. 創建項目后，我刪除了/wwwroot/lib/bootstrap文件夾中的文件。
2. 右鍵單擊WWWroot文件夾。 單擊Add-> Clientside library選項。
3. 搜索bootstrap並選擇choose specific files選項。 然后檢查SCSS文件夾。 修改目標位置如下。

4. 瀏覽wwwroot/lib/bootstrap/scss並創建一個名為bootstrap-custom.scss的文件。

 $primary: #00ffff; $white: white; @import "~/lib/bootstrap"; nav.navbar { background: linear-gradient($primary, $white) }

5. 安裝了下面的擴展並重新啟動 Visual Studio。

6. 瀏覽wwwroot/lib/bootstrap/scss位置並右鍵單擊文件bootstrap-custom.scss 。 選擇Web compiler -> Compile file選項。

7. 它將在同一位置創建bootstrap-custom.css和bootstrap-custom.min.css文件。 將這兩個文件復制到wwwroot/css文件夾。

8. 轉到_Layout.cshtml文件並添加對bootstrap-custom.css的引用。 此外，在下面的行中添加注釋。

注意由您決定將編譯后的 CSS 文件保存在哪里。 您只需要確保在布局文件中傳遞正確的路徑。

 @*<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />*@ <link href="~/lib/bootstrap/scss/bootstrap-custom.css" rel="stylesheet" /> @*<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>*@

9. 運行項目。

輸出：

注意：您可能需要根據您的環境進行一些更改以使其在您身邊工作。

Answer 2

我遇到了同樣的問題。 原來是我使用的 SASS 編譯器。 我正在運行一個 .NET MVC C# Web 應用程序，並已使用 VS 2019 安裝了此VS 擴展。在發現 bg-primary 生成的錯誤后，我開始搜索原因。 我在這個線程中找到了答案，並切換到使用較新的 SASS Compiler found here 。 在使用新編譯器（由同一個人“Mad Kristensen”開發）再次編譯 SASS 后，問題得到解決。

因此，如果您使用相同的編譯器，請嘗試切換到較新的版本。 您也許可以使用@Deepak-MSFT 答案中所述的編譯器，但我還沒有嘗試過那個。