我正在用Astro [^2.2.1]、Bootstrap [5.3.0-alpha 3]和Svelte [^3.58.0]开发一个网站。除了某些元素（通常是按钮）的前景和背景色之外，几乎所有的东西都工作正常。我不确定是什么原因使网站的生产版本看起来不像网站的开发版本。
我使用了一个自定义的样式表，在这里我定义了自己的引导变量，并将其导入到我的基本astro布局中。我没有覆盖任何默认的颜色选项，只是改变了默认的字体，链接装饰和面包屑选项。
在开发版本中，在.btn的样式规则下面有两个background-color定义
background-color: transparentbackground-color: var(--bs-btn-bg)
但是在生产模式下，只有第一条规则存在，并且没有应用正确的背景颜色
前景色也存在同样的问题，除了第一个选项是#212529而不是透明，第二个选项是var(--bs-btn-color)。
如果任何人有任何信息，可以帮助，将不胜感激。
Here是显示此问题示例的imgur链接
我试图改变我实现引导的方式。删除了我的自定义样式表，只使用vanilla 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' />
1条答案
按热度按时间h9vpoimq1#
我已经弄清楚了问题是什么。我使用的是astro的astro-compress插件，删除后一切都按预期开始工作。