使用 CDN 链接和 SCSS 覆盖引导程序 4答案

【问题标题】：Overriding bootstrap 4 with CDN link and SCSS使用 CDN 链接和 SCSS 覆盖引导程序 4
【发布时间】：2019-01-29 00:59:16
【问题描述】：

我在这里看到的关于使用 SCSS 覆盖 Bootstrap (v4) 的所有答案都假设 Bootstrap（或 Bootstrap 的 CSS 文件？）已下载到站点目录。

我通过 CDN 链接将引导程序导入到我的 layout.html 页面中，并在其后包含指向所有其他 CSS 文件的链接。链接到 SCSS 的那个列在最后。我会以这种方式链接以使用 SCSS 覆盖 Bootstrap。

举个简单的例子，我无法更改用作每个页面标题的字体。 layout.html中的部分是这样的：

 <head>
    <!-- Bootstrap 4 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
    <!-- Additional CSS use of static dir structure require w/ jinja-->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

</head>

<body>
    <div class="container siteTitle h-100">
        <div class="row h-100 mx-auto">
            <div class="col-md-12" >
                <h1 id="siteName">Foo</h1>
                <h3 id="siteSubTitle">Bar</h3>
                <h6 id="siteTagLine">Baz</h6>
            </div>
        </div>
    </div> <!-- end header container -->
</body>

而 SCSS 目前看起来是这样的：

$siteFont: 'IM Fell English SC', serif;


#siteName, #siteSubTitle, #siteTagLine {
    $font-family-serif: $siteFont !default;
}

已经尝试过其他变体（例如，放弃 $siteFont 变量并将字体名称直接放在 CSS 规则中）。我该如何解决这个问题？

【问题讨论】：

Bootstrap 来自 CDN 这一事实不会影响您的 CSS 覆盖的工作方式。你确定你使用了正确的选择器吗？你用变量$font-family-serif覆盖了什么？
哦 - 如果你试图从 Bootstrap 的预编译 SCSS 中覆盖变量，你将无法做到这一点。您需要通过直接定位要更改的元素和属性（而不是变量）来覆盖 Boostrap 的平面编译 CSS。
@JonUleis Bootstrap 为这些标题选择了默认字体。我想加入谷歌字体。我在这里某处读到 $font-family-serif: 是我需要定位的变量。我应该跳过 SCSS 而只写 CSS。 Bootstrap 不是一成不变的。
那些变量（任何以$ 开头的变量）只存在于 Bootstrap 的 SCSS 中。您正在链接到他们编译的 CSS，因此您必须针对实际的 CSS 属性（font-family 等）而不是 Sass 变量。
@JonUleis 这就是我所缺少的区别！

标签： html css twitter-bootstrap sass

【解决方案1】：

所以简短的回答是 - 你不能。

也就是说，您不能更改任何 SASS 变量并仍然使用 CDN 中的 Bootstrap。这是因为那个版本的 Bootstrap 已经编译好了，所以变量（例如 $font-family-base 或 $enable-responsive-font-sizes）已经被替换了。

正如上面的讨论，如果你想改变任何 SASS 变量，你需要编译你自己的 Bootstrap 版本。

对于简单的更改，这当然感觉有点矫枉过正。所以继续使用 CDN 版本并只是覆盖 CSS 级别的东西并没有错。对于更广泛的更改，SASS 当然是要走的路。

【讨论】：