Bootstrap Import throws Invalid CSS error

Help
1

I am having an issue with an Invalid CSS error when I try to import TWBS Bootstrap into my bare bones Jekyll project. I asked for help within the Jekyll GitHub Discussions tab. Here is the link with all the errors, code snippets, and repo link in case it is helpful…

I came across a similar forum post where the author said that the front matter should not be inside any scss files? The docs state though that the front matter is necessary to cause Jekyll to process the .scss file as a .css file. I am using an older tutorial, so perhaps the Jekyll syntax has changed since then…

My main.scss file (located at root > assets) has the following:

---
---
@import 'bootstrap/bootstrap';

But I am getting two errors - one in VSCode { expectedscss(css-lcurlyexpected) and the other when I try to run jekyll serve

At first it was returning this error

Error: Invalid CSS after "-": expected 1 selector or at-rule, was "---" (Jekyll::Converters::Scss::SyntaxError)
        on line 1:1 of assets/css/main.scss
        from line 1:1 of main.scss
>> ---

   ^

but now it returns this:

rror: @import directive requires a url or quoted path (Jekyll::Converters::Scss::SyntaxError)
        on line 1:1 of main.scss
>> @import (bootstrap/bootstrap);

   ^

What does it mean by “URL or quoted path”? I have quotes " " around the import and I have imported the Bootstrap SCSS files into my project (root > assets > css > bootstrap) so I do not have a URL for this import?

2

I updated my _config.yml file from:

sass:
  sass_dir: assets/css

to:

sass:
  sass_dir: ../assets/css

and the console error went away and I can "successfully run jekyl serve without an error… However, there is still no Bootstrap styling and I am now getting this error when I run jekyll serve:

[2022-04-13 13:07:04] ERROR '/assets/css/main.css' not found. The VSCode error is still present…

3

are you editing the file in the _site folder? if so don’t do that as that is going to be overwritten every time jekyll runs - not to mention that is for css/html stuff only so front matter is going to break things.

You only edit the files in the root folder, jekyll then takes that and renders out the _site folder.

1 Like
4

Thank you that was a typo. I am not editing the _site folder. I will edit the OG blog post :slight_smile:

5

I am not familiar with Bootstrap, but looking at the documentation, you will probably want to use bootstrap on any page. Is that correct?

Reading the Bootstrap introduction here:

It looks like you want to add this to the <head> area of your site:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

And then add the following (or some variant) within the <body> area of your site:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

If you happen to be using Jekyll’s minima theme, you will find the <head> area in the _includes/head.html file. You will find the <body> area in the _layouts/default.html file.

I think this is a better way to go.

Note: if you do not have an _includes or _layout folder in your site, you may want to copy that theme content into your working repo by following the Overriding theme defaults instructions here:

1 Like
6

Thank you for your thorough reply @BillRaymond I will give that solution a try. It does make more sense to pull the CSS from a CDN rather than shipping all that code, some (or maybe even most of it) the app will not end up needing…

1 Like