如何修改Laravel项目中webpack配置的主题primary-color主色调

一、修改源配置重新编译主题 #

如果你使用的是基于Sass源码构建的Bootstrap项目，可通过修改内置变量实现全量同步：

• 定位到项目内的Bootstrap自定义变量文件，通常命名为_custom.scss或variables.scss，需保证该文件的引入顺序早于Bootstrap核心Sass入口。
• 调整对应配色变量：标准Bootstrap蓝的色值为#0d6efd，对应全局主色变量为$primary，如果仅需调整按钮配色不影响其他组件，可单独修改按钮专属变量：

  // 仅修改按钮主色，不影响其他primary色系组件
  $btn-primary-bg: #0d6efd;
  $btn-primary-border-color: #0d6efd;
  $btn-primary-hover-bg: #0b5ed7;
  $btn-primary-hover-border-color: #0a58ca;
  

• 重新编译：根据你使用的构建工具执行对应编译命令即可，常见场景如下：
  • 基于webpack/vite等工程化工具的项目：执行npm run build或者对应的开发环境启动命令，构建工具会自动完成Sass编译打包
  • 使用Bootstrap官方构建脚本的项目：执行npm run css-compile即可生成新的主题CSS文件

二、无需重新编译的覆盖方案 #

如果你不希望修改源码、重新编译，可直接通过自定义CSS覆盖生效，操作完全合规无风险：

• 自定义CSS的引入顺序需放在Bootstrap已编译CSS文件之后，不需要加!important即可自然覆盖默认样式，示例代码如下：

  .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
  }
  .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
  }
  .btn-primary:focus {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
  }
  

• 若仅需单页面生效，将上述代码写入对应页面的<style>标签内即可，不会影响全局其他业务逻辑。

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