错误 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 答案中所述的编译器，但我还没有尝试过那个。