如何用WordPress theme.json生成的变量覆盖Bootstrap CSS变量？

要实现将 Bootstrap CSS 变量关联到 WordPress theme.json 生成的全局变量，核心思路是把 Bootstrap 的变量值替换为 WordPress 导出的 CSS 自定义属性，以下是两种可靠的实现方案：

方案一：通过 Sass 预编译（推荐） #

Bootstrap 本身基于 Sass 开发，通过修改 Sass 变量的值为 WordPress 的 CSS 变量，可以让所有 Bootstrap 组件在编译时就继承 WordPress 主题的样式配置，避免遗漏。

1. 准备工作
   确保项目中已安装 Bootstrap 的 Sass 包（npm install bootstrap），并能编译 Sass 文件到 CSS。

2. 覆盖 Bootstrap Sass 变量
   创建自定义的 Sass 入口文件，先导入 Bootstrap 的变量定义，再将目标 Sass 变量的值设为对应的 WordPress CSS 变量，最后导入 Bootstrap 核心样式：

   // 导入 Bootstrap 基础变量
   @import "../node_modules/bootstrap/scss/variables";
   
   // 将 Bootstrap Sass 变量映射到 WordPress 全局变量
   $primary: var(--wp--preset--color--primary);
   $secondary: var(--wp--preset--color--secondary);
   $font-size-base: var(--wp--preset--font-size--medium);
   $border-radius: var(--wp--custom--border-radius); // 对应 theme.json 中的自定义变量
   
   // 导入 Bootstrap 全部核心样式
   @import "../node_modules/bootstrap/scss/bootstrap";
   

3. 编译 Sass 文件
   用你的项目构建工具（比如 Webpack、Gulp）编译这个 Sass 文件，生成最终的 Bootstrap CSS，其所有样式都会使用 WordPress 的主题变量。

方案二：纯 CSS 变量覆盖（无需预编译） #

如果不想使用 Sass，可直接在 Bootstrap CSS 之后加载自定义样式，重新定义 Bootstrap 自带的 CSS 变量（Bootstrap 5+ 已全面支持 CSS 变量，前缀为 --bs-）：

/* 必须在 Bootstrap 核心 CSS 之后加载 */
:root {
  --bs-primary: var(--wp--preset--color--primary);
  --bs-secondary: var(--wp--preset--color--secondary);
  --bs-font-size-base: var(--wp--preset--font-size--medium);
  --bs-border-radius: var(--wp--custom--border-radius);
}

这种方式简单直接，但要注意：部分 Bootstrap 旧版样式可能未使用 CSS 变量，仅通过 Sass 编译生成固定值，这类样式无法通过纯 CSS 覆盖，因此优先推荐方案一。

关键配置要点 #

1. 确认 WordPress 变量名
   WordPress 会将 theme.json 中的配置转换为全局 CSS 变量：

   • 颜色预设：--wp--preset--color--[slug]
   • 字体大小预设：--wp--preset--font-size--[slug]
   • 自定义变量：--wp--custom--[key]（对应 theme.json 中 settings.custom 下的配置）
     可通过浏览器开发者工具查看根元素（<html>）的样式，获取所有导出的变量名。

2. theme.json 配置示例
   确保你的 theme.json 中已正确定义需要映射的预设或自定义变量：

   {
     "settings": {
       "color": {
         "palette": [
           {
             "slug": "primary",
             "color": "#2563eb",
             "name": "Primary"
           }
         ]
       },
       "typography": {
         "fontSizes": [
           {
             "slug": "medium",
             "size": "1rem",
             "name": "Medium"
           }
         ]
       },
       "custom": {
         "border-radius": "0.5rem"
       }
     }
   }
   

最佳实践总结 #

• 优先使用 Sass 预编译方案，确保 Bootstrap 所有组件样式都能同步 WordPress 主题变量；
• 保持变量映射的一致性，比如 WordPress 的 primary 对应 Bootstrap 的 primary，避免维护混乱；
• 测试不同场景下的样式继承，确保 Block Theme 或 Classic Theme 中变量均全局可用；
• 若使用 WordPress 区块编辑器的自定义样式，可同步在 theme.json 中定义，实现全站样式统一。

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