在Shiny的bslib主题中如何使用.scss定义的自定义CSS变量？

问题原因 #

bs_add_variables 是在Sass编译阶段执行的，直接传入var(--my-color-1)时，Sass会将其视为普通字符串，而自定义CSS变量是浏览器端生效的，两者的执行阶段差异导致Bootstrap无法正确解析该值。

解决方案1：直接通过CSS规则覆盖Bootstrap样式 #

修改www/colors.scss，添加对目标组件的样式覆盖：

:root {
  --my-color-1: #76b0ff;
  --my-color-2: #ec6453;
}

/* 直接覆盖navbar-dark的背景色 */
.navbar-dark {
  background-color: var(--my-color-1) !important;
}

修改app.R，移除bs_add_variables相关代码：

library(shiny)
library(sass)
library(bslib)
library(magrittr)

custom_theme <- bslib::bs_theme(version = 5) %>%
    bslib::bs_add_rules(sass::sass_file("www/colors.scss"))

shinyApp(
    ui = bslib::page_navbar(
        title = "My App",
        theme = custom_theme,
        inverse = TRUE,
        bslib::nav_panel(title = "Tab 1"),
        bslib::nav_panel(title = "Tab 2")
    ),
    server = function(input, output, session) {}
)

解决方案2：结合Sass变量与CSS变量 #

先在Sass中定义变量，同时生成全局CSS变量，让bs_add_variables能正确解析：
修改www/colors.scss：

// 定义Sass变量
$my-color-1: #76b0ff;
$my-color-2: #ec6453;

// 生成全局CSS变量
:root {
  --my-color-1: #{$my-color-1};
  --my-color-2: #{$my-color-2};
}

修改app.R，使用Sass变量设置Bootstrap变量：

library(shiny)
library(sass)
library(bslib)
library(magrittr)

custom_theme <- bslib::bs_theme(version = 5) %>%
    bslib::bs_add_rules(sass::sass_file("www/colors.scss")) %>%
    bslib::bs_add_variables("navbar-dark-bg" = "$my-color-1")

shinyApp(
    ui = bslib::page_navbar(
        title = "My App",
        theme = custom_theme,
        inverse = TRUE,
        bslib::nav_panel(title = "Tab 1"),
        bslib::nav_panel(title = "Tab 2")
    ),
    server = function(input, output, session) {}
)

在应用代码中使用自定义CSS变量 #

如果需要在UI组件的内联样式中直接调用自定义变量，可直接写：

bslib::nav_panel(
    title = "Tab 1",
    p("测试文本", style = "color: var(--my-color-2); font-weight: bold;")
)

内容的提问来源于stack exchange，提问作者yben