如何在Bootstrap不同页面为指定组件单独主题化并保留默认样式？

Awesome question—you don't need to clutter your project with multiple custom.scss files to handle this scenario! You absolutely can reset specific Bootstrap components back to their default styles within a single theme file, using conditional body classes to toggle which components get reset on each page. Here's a clean, scalable approach:

The core idea is to:

1. First define your global theme customizations (variables, base styles)
2. Add your custom component styles (buttons, inputs)
3. Create nested reset blocks that override your custom styles with Bootstrap's defaults, triggered by a class on the <body> tag

Here's the code breakdown:

// 1. Import Bootstrap's core dependencies first
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// 2. Global theme customizations (apply to all pages unless overridden)
$primary: #2563eb; // Your custom primary color
$secondary: #6b7280;
$body-bg: #f9fafb;
// ... add any other global variable or base style changes here

// 3. Your custom component styles (these are the defaults for all pages)
// Custom input styles
.form-control {
  border-radius: 0.375rem;
  border-color: $primary;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  
  &:focus {
    border-color: darken($primary, 10%);
    box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
  }
}

// Custom button styles
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
  
  &.btn-primary {
    background-color: $primary;
    border-color: $primary;
    
    &:hover {
      background-color: darken($primary, 10%);
      border-color: darken($primary, 15%);
    }
  }
}

// 4. Conditional reset blocks (only active when body has the matching class)
// Reset buttons to Bootstrap defaults
.body-reset-buttons {
  // Temporarily switch back to Bootstrap's original primary color
  $temp-primary: $primary;
  $primary: $bootstrap-primary; // Bootstrap's built-in original primary variable

  // Re-import Bootstrap's default button styles to override our custom ones
  @import "bootstrap/scss/buttons";

  // Restore our custom primary color after resetting
  $primary: $temp-primary;
}

// Reset inputs to Bootstrap defaults
.body-reset-inputs {
  // Temporarily switch to Bootstrap's original primary color
  $temp-primary: $primary;
  $primary: $bootstrap-primary;

  // Re-import Bootstrap's default form control styles
  @import "bootstrap/scss/forms/form-control";

  // Restore custom primary color
  $primary: $temp-primary;
}

Now you just need to add the appropriate class to the <body> tag of each page:

• Page 1 (custom inputs, default buttons): Add body-reset-buttons to the body

  <body class="body-reset-buttons">
    <!-- Inputs here will use your custom styles; buttons use Bootstrap defaults -->
  </body>
  

• Page 2 (custom buttons, default inputs): Add body-reset-inputs to the body

  <body class="body-reset-inputs">
    <!-- Buttons here will use your custom styles; inputs use Bootstrap defaults -->
  </body>
  

• Pages with both custom styles: Leave the body class blank—your custom button and input styles will apply by default

• Variable handling: If your custom theme overrides variables that affect the component (like $primary for buttons), use Bootstrap's built-in $bootstrap-* variables (e.g., $bootstrap-primary, $bootstrap-secondary) to temporarily reset them. This ensures you get the exact default Bootstrap styles.
• Import order: Make sure your custom component styles come before the reset blocks. The nested reset styles (under body classes) will have higher specificity and override your custom styles where needed.
• Test edge cases: Don't forget to test interactive states (hover, focus, active) for reset components to ensure all default behaviors are restored. If you're using other related components (like input groups for inputs), you might need to re-import those Bootstrap partials into the reset block too.

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