如何为Bootstrap HTML文件配置靛蓝主题？设置$primary后无效果

你的代码没生效有两个核心原因：

• 浏览器无法直接解析原生Sass语法（$变量和@import），普通<style>标签仅支持CSS。
• 你同时引入了CDN上编译好的Bootstrap CSS文件，它的样式优先级会覆盖自定义变量的效果。

要改成靛蓝主题，按以下步骤修改：

步骤1：移除CDN的Bootstrap CSS链接 #

删掉头部的预编译Bootstrap样式链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

步骤2：引入Sass编译器和Bootstrap Sass源文件 #

浏览器需要借助第三方工具解析Sass，引入CDN的Sass编译器，并直接导入Bootstrap的Sass源文件：

<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.min.js"></script>

步骤3：设置靛蓝主题变量 #

Bootstrap 4的靛蓝对应颜色值为#6610f2，将$primary变量设为该值，替换原有的$primary: rebeccapurple;：

$primary: #6610f2; // Bootstrap 4官方靛蓝主题色
$danger: #dd0000;
$success: lime;
$warning: orange;
$info: aqua;
$body-bg: #f3f3f0;

@import "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/scss/bootstrap.scss";

步骤4：调整样式标签类型 #

将普通<style>标签改为<style type="text/scss">，让编译器识别这是Sass代码。

修改后的完整代码 #

<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/scss">
$primary: #6610f2; // Bootstrap 4靛蓝主题色
$danger: #dd0000;
$success: lime;
$warning: orange;
$info: aqua;

$body-bg: #f3f3f0;

@import "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/scss/bootstrap.scss";
</style>
</head>
<body>
    <div class="input-group input-group-sm ">
      <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
      <div class="input-group-append input-group-sm">
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        </button>
        <div class="dropdown-menu">
<input type="text" placeholder="Search.." id="myInput" class="search">
          <a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
          <a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
          <a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>                                    
        </div>
      </div>
    </div>
    
    
    <div class="input-group input-group-sm ">
      <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
      <div class="input-group-append input-group-sm">
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        </button>
        <div class="dropdown-menu">
<input type="text" placeholder="Search.."  class="search">
          <a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
          <a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
          <a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>                                    
        </div>
      </div>
    </div>        
    
    <div class="input-group input-group-sm ">
      <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
      <div class="input-group-append input-group-sm">
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        </button>
        <div class="dropdown-menu">
<input type="text" placeholder="Search.."  class="search">
          <a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
          <a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
          <a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>                                    
        </div>
      </div>
    </div>        
            
    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<script>
$(function(){

  $('.dropdown-item').click(function(e){
var value = $(this).data('value');
var textElement = $(this).parent().parent().prev()
textElement = textElement.val(textElement.val() + value);
event.preventDefault();
event.stopPropagation();
textElement.focus()
  });
  
});


$(".search").keyup(function(){
  var input, filter, ul, li, a, i;
  input = $(this).get(0);
  filter = input.value.toUpperCase();
  div = $(this).parent().get(0);

  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
  a[i].style.display = "";
} else {
  a[i].style.display = "none";
}
  }
});

(function() {
var disable = false;
$('.dropdown-toggle').on('mousedown touchstart', function() {
        disable = true;
        console.log("inside1")
    })
    .on('focus', function() {
        if (!disable) {
            $(this).dropdown('toggle');            console.log("inside2")
        }
    })
    .on('mouseup touchend',function() {
        disable = false;console.log("inside3")
    })
})()

</script>
</body>
</html>

注：我把按钮的btn-outline-secondary改成了btn-outline-primary，可以直接看到靛蓝主题的效果，你可根据需求调整其他组件的类名。

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