错误 get-function rgba-css-var is not a valid value for background-color答案

【问题标题】：Error get-function rgba-css-var is not a valid value for background-color错误 get-function rgba-css-var is not a valid value for background-color
【发布时间】：2022-06-21 00:34:27
【问题描述】：

我已按照以下步骤在 ASPNET Core 项目中设置 Bootstrap 5 SASS。

右键单击wwwroot 并选择Add->Client-Side Library。选定的 unpkg 提供程序，bootstrap@5.1.3 库。
创建了一个名为main.scss 的文件
从 main.scss 中的 bootsrap 导入关注

main.scss的内容是：

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

右键main.scss文件，选择Web Compiler->Compile文件，文件编译成功，生成main.min.css和main.css
通过添加<link href="~/css/main.css" rel="stylesheet" /> 修改_Layout.cshtml

加载页面时，未正确生成 CSS。 bg-dark 或bg-light 显示background-color 中的无效值。

同样在 Visual Studio 中，来自同一文件 main.css 的 75 条警告。

【问题讨论】：

我建议您按照this answer 中提到的步骤来配置带有 Asp.Net Core 项目的 Bootstrap 5 SASS。它可能会帮助您解决上述问题。
我遵循相同的答案。
你可以参考我的回答来让 SASS 工作。之后，如果您仍然面临 CSS 的问题，那么您需要与我们分享您的 SASS 代码。这样我们就可以尝试在我们这边进行测试。另外，分享您对 CSS 的预期结果。

标签： css visual-studio-2019 bootstrap-5 saas asp.net-core-5.0

【解决方案1】：

我参考了this answer 中提到的步骤，发现做了一些改动就可以开始工作了。

注意：我使用的是 Visual Studio 2022，并且我创建了一个带有 .net core 6.0 版本的 Asp.Net core 项目。

以下是使其工作的步骤。

创建项目后，我删除了/wwwroot/lib/bootstrap文件夹中的文件。
右键单击WWWroot 文件夹。点击Add-> Clientside library 选项。
搜索bootstrap 并选择choose specific files 选项。然后检查SCSS 文件夹。修改目标位置如下。

通过wwwroot/lib/bootstrap/scss 浏览并创建一个名为bootstrap-custom.scss 的文件。

$primary: #00ffff;
$white: white;
@import "~/lib/bootstrap";

nav.navbar {
    background: linear-gradient($primary, $white)
}

安装了下面的扩展并重新启动 Visual Studio。

浏览wwwroot/lib/bootstrap/scss 位置并右键单击文件bootstrap-custom.scss。选择Web compiler -> Compile file 选项。

它将在同一位置创建bootstrap-custom.css 和bootstrap-custom.min.css 文件。将这两个文件复制到 wwwroot/css 文件夹。

转到_Layout.cshtml 文件并添加对bootstrap-custom.css 的引用。此外，将 cmets 添加到下面的行中。

注意由您决定将编译后的 CSS 文件保存在哪里。您只需要确保在布局文件中传递正确的路径。

@*&lt;link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /&gt;*@ &lt;link href="~/lib/bootstrap/scss/bootstrap-custom.css" rel="stylesheet" /&gt; @*&lt;script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;*@

运行项目。

输出：

注意：您可能需要根据您的环境进行一些更改才能使其在您身边工作。

【讨论】：

我在 Visual Studio 2019 中的 .net-core-5 中做了完全相同的事情，但仍然无法正常工作。
@Rashik，你能告诉我们你在哪一步卡住了吗？以及您面临的具体问题是什么？它可以帮助我们更好地理解问题。
bg-color 的值不会显示在浏览器中。你能看到我已经附加到问题中的谷歌浏览器的屏幕截图吗？
我建议您分享您的 SAAS 代码。我可以尝试检查它是否正确生成 CSS 文件。
已经有问题了。

【解决方案2】：

我遇到了同样的问题。原来是我使用的 SASS 编译器。我正在运行一个 .NET MVC C# Web 应用程序，并已安装 this VS 扩展与 VS 2019。在发现 bg-primary 生成的错误后，我开始搜索原因。我在this 线程中找到了答案，并切换到使用发现here 的较新的SASS 编译器。使用新的编译器（由同一个人“Mad Kristensen”开发）再次编译 SASS 后，问题得到解决。

因此，如果您使用相同的编译器，请尝试切换到较新的版本。

【讨论】：