Question

我在这里看到的有关用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规则中）。我该怎么拉？

Answer 1

对此的简短答案是-您不能。

也就是说，您不能更改任何SASS变量，而仍然使用CDN中的Bootstrap。这是因为该版本的Bootstrap已被编译，因此变量（例如$ font-family-base或$ enable-sensitive-font-sizes）已被替换。

与上面的讨论一样，如果要更改任何SASS变量，则需要编译自己的Bootstrap版本。

对于简单的更改，这当然感觉像是过大了。因此，继续使用CDN版本并只在CSS级别覆盖内容是没有错的。对于更广泛的更改，SASS当然是可行的方法。

使用CDN链接和SCSS覆盖引导4

1 个答案: