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
)

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的全部目的。通过此链接https://getbootstrap.com/docs/4.0/getting-started/theming/#components bootstrap承诺：

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

我做错了还是宝石问题？我不是Ruby开发人员，我试图让前端部分工作。

非常感谢任何帮助。

Answer 1

我认为你正在遇到css特异性问题。我会首先尝试@import "core-variables"，如果这不起作用，您可以随时在变量之后添加!important以确保其特异性优先。

Answer 2

哈利路亚！

事实证明问题确实出现在这个宝石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
);

覆盖CoreUI变量

2 个答案: