如何在无插件情况下让自定义CSS继承Bootstrap类样式？

我来帮你搞定这个问题！你遇到的核心问题是：普通CSS不支持@extend语法，而如果是用CDN引入的Bootstrap成品CSS，Sass的@extend也没法继承那些类（因为Sass编译时看不到Bootstrap的类定义）。下面给你几个开箱即用、无需额外插件的方案：

方案1：纯CSS复用Bootstrap变量（推荐，无预处理器要求） #

Bootstrap 5及以上版本大量使用CSS变量来定义样式，你可以直接复用这些变量来复刻.btn和.btn-outline-primary的样式，同时添加自己的自定义规则：

/* 给表单内的按钮应用Bootstrap按钮样式+自定义小型大写 */
form button {
  /* 复用.btn的核心样式变量 */
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  border-radius: var(--bs-btn-border-radius);
  border: var(--bs-btn-border-width) solid transparent;
  cursor: pointer;
  transition: var(--bs-btn-transition);
  
  /* 复用.btn-outline-primary的样式变量 */
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-color: transparent;
  
  /* 你的自定义样式 */
  font-variant: small-caps;
}

/* 别忘了复刻hover和focus状态的样式 */
form button:hover,
form button:focus {
  color: var(--bs-white);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

这个方案完全不需要预处理器，直接写在普通CSS文件里就能生效，而且能完美对齐Bootstrap的样式规则。

方案2：用JavaScript动态添加Bootstrap类（更直接） #

如果你不想手动复刻Bootstrap的样式，也可以用JS给预生成的按钮动态添加.btn和.btn-outline-primary类，再加上自定义样式：

// 页面加载完成后，给所有表单内的按钮添加Bootstrap类和自定义类
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('form button').forEach(button => {
    button.classList.add('btn', 'btn-outline-primary');
    button.classList.add('btn-small-caps'); // 自定义类
  });
});

/* 自定义小型大写样式 */
.btn-small-caps {
  font-variant: small-caps;
}

这个方案非常直观，直接利用Bootstrap的现成类，不需要自己写重复样式，适合不想折腾CSS变量的场景。

方案3：如果你的项目用Bootstrap Sass源文件 #

如果你是通过npm安装Bootstrap并导入其Sass源文件，那只需要先导入Bootstrap的Sass，再使用@extend即可：

// 先导入Bootstrap的Sass文件（路径根据你的项目结构调整）
@import "../node_modules/bootstrap/scss/bootstrap";

form button {
  @extend .btn;
  @extend .btn-outline-primary;
  font-variant: small-caps;
}

注意：这个方案要求你的项目配置了Sass编译环境，且是导入Bootstrap的Sass源文件，而不是用CDN引入成品CSS。

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