html - 使用 CDN 链接和 SCSS 覆盖引导程序 4
问题描述
我在这里看到的关于使用 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 规则中)。我该如何解决这个问题?
解决方案
所以对此的简短回答是 - 你不能。
也就是说,您不能更改任何 SASS 变量并仍然使用 CDN 中的 Bootstrap。这是因为那个版本的 Bootstrap 已经编译好了,所以变量(例如 $font-family-base 或 $enable-responsive-font-sizes)已经被替换了。
正如上面的讨论,如果你想改变任何 SASS 变量,你需要编译你自己的 Bootstrap 版本。
对于简单的更改,这当然感觉有点矫枉过正。所以继续使用 CDN 版本并只是覆盖 CSS 级别的东西并没有错。对于更广泛的变化,SASS 当然是要走的路。
推荐阅读
- javascript - 如何在正则表达式中选择所有不以两个“..”(点)开头的href
- c# - Why access Task.Result in the synchronous mode doesn't cause a deadlock?
- sql - Select with limit for the same id
- android - 无法在 AndroidStudio 中运行我的第一个项目
- python - 如何将带有条件格式的 pandas df.to_html 表格式化为 Outlook?
- python - 带有 LDAP 和本地帐户的 Django Auth
- c# - 映射没有主索引但具有唯一索引的 Oracle 数据库表
- linux - 如何在 bash 中的 ssh 期望脚本中自动执行 ctrl+d 操作?
- c++ - 绑定到 const 引用的临时对象是否被视为 const 对象?
- mysql - 从表中选择最小值(也是最大值和平均值)以及事件的时间戳