Currently in the process of building a website using Astro [^2.2.1], Bootstrap [5.3.0-alpha3], and Svelte [^3.58.0]. Most components are functioning correctly, except for some elements like buttons where the foreground and background colors seem off. I'm unsure why the production version doesn't match the development version.
To customize styles, I've created a custom stylesheet with my bootstrap variables and imported it into my base astro layout. My changes mainly focus on fonts, link decorations, and breadcrumbs without overriding default color options.
In the development environment, within the styling rules for .btn, there are two background-color definitions:
background-color: transparentbackground-color: var(--bs-btn-bg)
However, in the production mode, only the first rule is present, leading to incorrect background colors being applied.
A similar issue exists for foreground colors, where the first option is #212529 instead of transparency, and the second is var(--bs-btn-color).
If anyone has insights or solutions to this problem, I would greatly appreciate the help.
View this Imgur link for an example showcasing the issue.
I've attempted changing how Bootstrap is implemented by removing my custom stylesheet and solely relying on vanilla Bootstrap, but the problem persisted. Even removing the npm package entirely and using CDN didn't resolve the issue.
custom/bootstrap.scss
@import '@fontsource/fira-code';
@import '@fontsource/fira-sans';
$font-family-monospace: 'Fira Code', monospace !important;
$font-family-sans-serif: 'Fira Sans', sans-serif !important;
$breadcrumb-divider-color: #808080;
$breadcrumb-divider: url("example.svg");
$link-decoration: none;
$link-hover-decoration: underline;
@import 'bootstrap/scss/_functions.scss';
@import 'bootstrap/scss/_variables.scss';
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-icons/font/bootstrap-icons.css';
Base.astro
---
...
import '@styles/custom/bootstrap.scss'
...
---
<html>
...
</html>
example-component.(astro | svelte)<input type='submit' class='btn btn-primary' value='SUBMIT' />