如何在Svelte项目中覆盖Bootstrap默认样式？primary颜色修改失败

问题根源 #

你当前的配置存在两个核心问题：

1. 同时导入了编译好的Bootstrap CSS文件和自定义SCSS，编译后的CSS优先级更高，直接覆盖了你的自定义样式。
2. 自定义变量没有接入Bootstrap的SCSS编译流程，变量修改没有被应用到Bootstrap组件上。

修复步骤 #

1. 调整+layout.svelte的导入逻辑

移除直接导入的Bootstrap编译CSS，只保留自定义SCSS和JS导入：

<script>
  import '../app.scss';
  import scriptSrc from 'bootstrap/dist/js/bootstrap.bundle.js?url';
</script>
<svelte:head>
  <script src={scriptSrc}></script>
</svelte:head>
<slot />

2. 配置app.scss整合自定义变量与Bootstrap

在./src/app.scss中先导入自定义变量文件，再导入完整的Bootstrap SCSS源码：

// 导入自定义变量
@import './variables.scss';
// 导入完整的Bootstrap SCSS
@import '../node_modules/bootstrap/scss/bootstrap.scss';

3. 简化variables.scss的内容

只需在导入Bootstrap前定义要覆盖的变量即可，无需单独导入Bootstrap零散的SCSS文件：

// 覆盖Bootstrap默认主色调
$primary: #ff0000;

验证方法 #

重启开发服务器（npm run dev），使用Bootstrap的btn-primary类测试按钮颜色，此时按钮应显示红色而非默认蓝色。

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