2

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

现在该模板覆盖了引导颜色，我想再次将它们覆盖为我的颜色（特别是-primary），这样当我使用例如btn-primary类时，按钮就会有我的颜色。我试过这个，但它不起作用。

_core-variables.scss 文件

$blue:    #2482dc;

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

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

应用程序.scss 文件

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

更新

我尝试@include了来自 Bootstrap 或 CoreUI 的函数，在这两种情况下它们都未定义，尽管它们被导入到 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 bootstrap 承诺：

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

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

任何帮助将不胜感激。

4

2 回答 2

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
);
于 2018-04-17T22:25:58.647 回答
0

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

于 2018-04-17T18:53:59.637 回答