覆盖 CoreUI 变量

Question

所以有这个 gem https://github.com/pelted/coreui-rails，它使用 CoreUI，它是一个 Bootstrap 管理模板。

现在该模板覆盖了 Bootstrap 颜色，我想再次将它们覆盖为我的颜色（特别是 -primary），这样当我使用例如btn-primary class，按钮会有我的颜色。我试过了，但没用。

_核心-variables.scss 文件

$blue:    #2482dc;

$colors: (
    "blue": $blue
);

$theme-colors: (
    "primary": $blue
)

application.scss 文件

@import "coreui-free";
@import "core-variables";

更新

我尝试了 Bootstrap 或 CoreUI 中的 @include 函数，尽管它们被导入到 CoreUI-rails gem 中，但在这两种情况下它们都是未定义的： https://github.com/pelted/coreui-rails/blob/master/vendor/assets/stylesheets/_coreui-free.scss

另一个更新

经过更多研究和反复试验后，我发现我只能使用以下代码覆盖 .btn-primary：

.btn-primary {
    @include button-variant(theme-color("primary"), theme-color("primary"));
}

这很好，但它违背了 theme-colors 的全部目的。通过这个 link https://getbootstrap.com/docs/4.0/getting-started/theming/#components bootstrap 承诺：

"Many of Bootstrap’s components and utilities are built with @each loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops."

是我做错了还是gem有问题？我不是 Ruby 开发人员，我正在努力使前端部分正常工作。

如有任何帮助，我们将不胜感激。

Answer 1

我认为您运行遇到了 css 特异性问题。我会尝试将 @import "core-variables" 放在第一位，如果这不起作用，您可以随时在变量后添加 !important 以确保它们的特异性优先。

Answer 2

哈利路亚！

原来问题确实出在这个gemhttps://github.com/pelted/coreui-rails

我发现 _core-variables 需要在 coreui-free 文件之前导入。所以我将 application.scss 更改为：

@import "core-variables";
@import "coreui-free";

但它仍然不起作用，所以我检查了这个 coreui-free 文件的作用。它看起来像这样：

@import "flag-icon/flag-icon";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "simple-line-icons/simple-line-icons";
@import "bootstrap-variables";
@import "bootstrap";
@import "coreui/core";

原来 bootstrap-variables 基本上每次都覆盖了我的 core-variables。我需要更改导入顺序：

@import "bootstrap-variables";
@import "_core-variables";
@import "flag-icon/flag-icon";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "simple-line-icons/simple-line-icons";
@import "bootstrap";
@import "coreui/core";

现在覆盖 primary 颜色就这么简单：

$theme-colors: (
    primary: #2482dc
);

覆盖 CoreUI 变量

Override CoreUI variable

ruby-on-rails

sass

bootstrap-4

core-ui