使用 CDN 链接和 SCSS 覆盖引导程序 4 [英] Overriding bootstrap 4 with CDN link and SCSS
问题描述
我在这里看到的关于使用 SCSS 覆盖 Bootstrap (v4) 的所有答案都假定 Bootstrap(或 Bootstrap 的 CSS 文件?)已下载到站点目录.
我正在通过 CDN 链接将引导程序导入到我的 layout.html 页面中，并且在它之后有指向所有其他 CSS 文件的链接.链接到 SCSS 的那个被列在最后.我会链接到以这种方式使用 SCSS 覆盖 Bootstrap.
举个简单的例子，我无法更改用作每个页面标题的字体.layout.html 中的部分是这样的:
<!-- Bootstrap 4 --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftdhkL><!-- 太棒了--><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq74v+lsOriginDQ5"匿名"><!-- 谷歌字体--><link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet"><!-- 静态目录结构的额外 CSS 使用需要 w/jinja--><link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"><身体><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">栏</h3><h6 id="siteTagLine">Baz</h6><!-- 结束头容器-->
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 当然是要走的路.
All of the answers I've seen on here with respect to overriding Bootstrap (v4) with SCSS assume Bootstrap (or Bootstrap's CSS file?) is downloaded to a site directory.
I'm importing bootstrap via the CDN link into my layout.html page and have links to all other CSS files after it. The one linked to SCSS is listed dead last. I'd link to override Bootstrap with SCSS this way.
As a quick example, I couldn't change the font used as the title for every page. The section in layout.html is like so:
<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>
And the SCSS looks like this at the moment:
$siteFont: 'IM Fell English SC', serif;
#siteName, #siteSubTitle, #siteTagLine {
$font-family-serif: $siteFont !default;
}
Other variations (e.g., ditching the $siteFont variable and placing the font name directly in the CSS rule) have been tried. How do I pull this off?
So the short answer to this is - you can't.
That is, you can't change any SASS variables and still use Bootstrap from the CDN. This is because that version of Bootstrap has already been compiled, so the variables (such as $font-family-base or $enable-responsive-font-sizes) have already been substituted in.
As in the discussion above, if you want to change any SASS variables, you need to compile your own version of Bootstrap.
For simple changes this does of course feel like overkill. So it's not wrong to continue using the CDN version and just override things at the CSS level instead. For more extensive changes, SASS is of course the way to go.
这篇关于使用 CDN 链接和 SCSS 覆盖引导程序 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
