Question

在构建我的生产项目 (build) 后，某些元素具有不同的样式（使用 serve 时不存在）

详情：

我同时使用 CoreUI Pro 3 (Vue 2) 和 BootstrapVue 2.21.2，它们都使用 bootstrap 4（但自定义）。

问题是表单输入的有效或无效状态图标在生产中未对齐，但在开发中很好。因此，例如 .form-control 和 .is-valid 有错误的 background-position。

在开发过程中生成了两种等效的样式（正在使用最上面的一种）。

html:not([dir="rtl"]) .was-validated .form-control:valid, html:not([dir="rtl"]) .form-control.is-valid {
    background-position: center right calc(0.375em + 0.1875rem);
}
.was-validated .form-control:invalid, .was-validated .form-control:valid, .form-control.is-invalid, .form-control.is-valid {
    background-position: right calc(0.375em + 0.1875rem) center;
}

在生产中还生成了两种样式，其中使用了最上面的一种 - 这就是问题所在。强制它使用第二个修复它。

html:not([dir=rtl]) .form-control.is-valid, html:not([dir=rtl]) .was-validated .form-control:valid {
    background-position: 100% calc(.375em + .1875rem);
}
.form-control.is-invalid, .form-control.is-valid, .was-validated .form-control:invalid, .was-validated .form-control:valid {
    background-position: right calc(.375em + .1875rem) center;
}

那么有没有一种好的方法可以让它使用正确的样式或找出问题的根源？ 有好几种方法，但我不确定该先购买哪一种。

我尝试更新所有各种 sass 加载器和 webpack，但没有任何改变。我还尝试复制 Core UI 的导入文件并修改表单 mixin 的导入顺序，但这没有帮助（我也不是 sass 专家）。四处移动 @mixin form-validation-state($state, $color, $icon) 似乎也无济于事。

我的 styles.scss 中的特定导入顺序（相反的顺序不起作用）：

@import "~@coreui/coreui-pro/scss/coreui";
@import '~bootstrap-vue/src/index.scss';

我知道可能有很多相关文件，但这些应该是一个好的开始。如果需要，可以提供更多详细信息。

Vue.js 生产版本具有不同的生成 CSS 样式

0 个答案: