Question

我正在尝试在Bootstrap中更改默认字体系列，但是我的更改将被忽略。

此问题已在仓库（https://github.com/twbs/bootstrap/issues/21595）上关闭，但我仍然遇到问题。

> bundle info bootstrap
=> bootstrap (4.1.3)

我有bootstrap-custom.scss：

/*!
 * Bootstrap v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

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

_variables.scss：

...
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif:  "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base:        $font-family-sans-serif !default;
...

然后将其导入文件顶部的application.scss中

@import "bootstrap-custom";
@import "variables";

如果我尝试使用此CSS，那是行不通的：

body {
  font-family: $font-family-base;
}

但是如果我在$font-family-base中更改_variables.scss的名称并在主体中使用新变量，它将起作用。

我有什么问题吗？

Answer 1

发生这种情况的机会很少，但是您是否正确检查了文件名？

从您的代码看来，自定义样式文件的名称为 bootstrap_custom.scss ，而您导入的文件名为 bootstrap-custom 。

>

查看文件名中的 _（下划线）和-（破折号/连字符）的区别。

Answer 2

最后，我将引导程序gem从4.1.3升级到4.2.1。然后，我删除了bootstrap-custom.scss文件，导入了整个官方_variables.scss文件，并导入了包含所有文件的引导程序。

此外，我必须在变量之前导入bootstrap/functions。现在，自定义变量起作用了。

Bootstrap 4.1.3 $ font-family-base被忽略

2 个答案: