我在这里看到的关于使用 SCSS 覆盖 Bootstrap (v4) 的所有答案都假设 Bootstrap （或 Bootstrap 的 CSS 文件？）已下载到站点目录。
我通过 CDN 链接将 bootstrap 导入到我的 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规则中）已经尝试过。我怎样才能做到这一点？
所以对此的简短回答是——你不能。
也就是说，您无法更改任何 SASS 变量，但仍然使用 CDN 中的 Bootstrap。这是因为该版本的 Bootstrap 已经编译完毕，因此变量（例如 $font-family-base 或 $enable-responsive-font-sizes）已被替换。
正如上面的讨论，如果您想更改任何 SASS 变量，您需要编译自己的 Bootstrap 版本。
对于简单的改变来说，这当然感觉有点矫枉过正。因此，继续使用 CDN 版本并只是覆盖 CSS 级别的内容并没有错。对于更广泛的更改，SASS 当然是最佳选择。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
