Question

它是SASS

的bootstrap 4.0

我的style.scss文件包含以下代码：

@import "../bootstrap/scss/bootstrap";

@import "colors";
@import "main";

和_colors.scss文件包含以下代码：

$bg-white : white;

$theme-colors: (
        primary: #333333
)

你可以看到我只是试图覆盖$theme-color('primary')，但问题在于它什么也没做。

如果我将@import "colors"移到文件的开头style.scss，则会出现以下错误：

错误../bootstrap/scss/_forms.scss（第284行：$ color：null不是 `rgba＆＃39;）的颜色

实际上，style.scss文件编译为style.css文件，而该文件是链接文件。

问题：在使用$theme-color时，如何覆盖bootstrap-4中的SASS？

任何帮助将不胜感激，并提前致谢

干杯。

Answer 1

Bootstrap 4.1的2018年更新

要在Bootstrap 4 SASS中更改原色或任何主题颜色，请在导入{{1}之前，在之前设置适当的变量。 }。这使您的自定义scss可以覆盖默认值，然后将在所有bootstrap.scss循环（btn-primary，bg-primary，text-primary等）中进行设置。

theme-colors

演示：https://www.codeply.com/go/lobGxGgfZE

Also see this answer

Answer 2

这也让我受益匪浅。您需要在变量之前将functions.scss导入到scss文件中。

@import '../../node_modules/bootstrap/scss/functions';
@import 'assets/styles/variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

您的路径可能会有所不同。

这是Bootstrap 4 Beta 1。

Answer 3

我假设您已使用Bootstrap 4 beta安装了npm，并且您希望自定义Bootstrap SCSS而不修改node_modules中的源。

我这样做的方法是覆盖variables.scss中包含的Bootstrap变量：

应用-styles.scss

// Custom SCSS variables I wish to override (see below) @import 'assets/styles/variables'; // Bootstrap 4 from node_modules @import '~bootstrap/scss/bootstrap.scss';

<强> variables.scss

$theme-colors: ( primary: $trump-hair, secondary: $gandalf-hat, success: $my-favorite-color, info: #FBC02D, warning: #FF5722, danger: $color-of-melena, light: #1B5E20, dark: $bile-green );

覆盖引导主题颜色的方法实际上是在即将发布的beta 2中进行更改。当前要求是在覆盖时必须包含整个theme-colors Sass地图。在当前的测试版中，未能包含整个Sass地图将导致：

$color的参数darken($color, $amount)必须是颜色

请参阅此Github issue和此Codepen以获取更多信息，以及如何在Beta 2中覆盖主题颜色的示例。

Answer 4

这些解决方案均无法正常工作。一些颜色接近并且将更新大多数元素（但不是所有元素）的颜色使用。我已经尝试了所有方法（以及我可以在StackOverflow和其他网站上找到的所有其他替代方法，但是这些解决方案仅影响专门引用color属性的元素，而不会使用theme-color函数更新这些元素以获取颜色。 / p>

预期的解决方案（并由其他人推荐）是

/* import only the necessary Bootstrap files */
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary and secondary colors to AAA standards */
$theme-colors: (
  primary: #004C9E
);

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

但这会在整个custom.css中留下15个＃007bff（正常的蓝色/基色）出现。它的示例出现在分页部分，例如

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

通过在导入functions.scss之后设置$ colors和$ theme-colors自定义属性，并放置用于导入变量.scss的语句，这些更改之后似乎会设置整个新颜色。我认为通过专门设置这些变量，引导程序变量无法覆盖它们。

@import "../../node_modules/bootstrap/scss/functions";

/* -------begin customization-------- */
$colors: (
  "" + blue: #004C9E
);

/* 80 required to bring primary color to AAA standards */
$theme-colors: (
  primary: #004C9E
);

@import "../../node_modules/bootstrap/scss/variables";

/* put other customization in here */

// /* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";

这可能看起来不正确，但确实可以正常工作。我不是SASS专家，所以也许其他人可以对此做更好的解释。希望这对仍在努力解决此问题的人有所帮助。

无法在bootstrap 4中覆盖$ theme-color

4 个答案: