CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsass
Ryan
Ryan

Reputation: 1432

Overriding bootstrap 4 with CDN link and SCSS

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?

Upvotes: 3

Views: 8134

Answers (1)

Marty
Marty

Reputation: 212

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.

Upvotes: 8

Related Questions