ruby-on-rails - 覆盖 CoreUI 变量

Question

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

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

_core-variables.scss 文件

$blue:    #2482dc;

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

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

应用程序.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 的全部目的。通过此链接 https://getbootstrap.com/docs/4.0/getting-started/theming/#components引导 promise :

“许多 Bootstrap 的组件和实用程序都是使用 @each 循环构建的，这些循环遍历 Sass 映射。这对于通过我们的 $theme-colors< 生成组件的变体特别有用 并为每个断点创建响应变体。当您自定义这些 Sass 映射并重新编译时，您会自动看到您的更改反射(reflect)在这些循环中。”

是我做错了还是gem的问题？我不是 Ruby 开发人员，我正在尝试让前端部分工作。

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

Answer 1

哈利路亚!

原来问题确实出在这个gem https://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
);