我正在开发一个网站与Astro [^2.2.1]， Bootstrap [5.3.0-alpha3]和Svelte[^3.58.0]。除了某些元素(通常是按钮)的前景和背景颜色外，几乎一切都正常工作。我不确定是什么阻止了网站的生产版本看起来像网站的开发版本。
我使用一个自定义样式表，我定义我自己的引导变量，并将其导入到我的基础天文布局。我没有覆盖任何默认的颜色选项，只是改变默认的字体，链接装饰和面包屑选项。
在.btn的样式规则下面的开发版本中background-color
background-color: transparentbackground-color: var(--bs-btn-bg)
然而，在生产模式下，只有第一条规则存在，并且没有应用正确的背景颜色
同样的问题也存在于前景颜色中，除了第一个选项是#212529，第二个是var(--bs-btn-color)而不是透明。
如果有人有任何信息可以帮助，我将不胜感激。
这里是一个imgur链接，展示了这个问题的一个例子
我试图改变我实现bootstrap的方式。删除我的自定义样式表，只使用香草Bootstrap无效。即使完全删除了npm包，CDN仍然遇到同样的问题
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' />
我已经弄清楚问题是什么了。我正在使用astro-compress插件，在删除astro后，一切都开始按预期工作。