3

How can I bring Bootstrap's SASS into my Jekyll project so that it will work on GitHub pages?

This is not a duplicate of this question: Adding Bootstrap to Jekyll. That question has little to do with GitHub Pages, and the answers mention using Bower, which I don't think GitHub Pages supports.

This doesn't work:

---
---
// This is at "/assets/css/site.scss"
@import "bootstrap";

I get this error:

File to import not found or unreadable: bootstrap

I have tried bundle add bootstrap but that doesn't change anything.

I am able to npm install bootstrap and get Jekyll to pull in needed things from node_modules/bootstrap per the instructions on this site and it works on my machine, but this isn't a suitable solution for GitHub Pages because GitHub Pages does not use npm.

Matt Thomas
  • 5,279
  • 4
  • 27
  • 59
  • is there any updates for this? – chia yongkang Jan 24 '20 at 07:39
  • @chiayongkang Sorry, I don't have any updates. Unless GitHub Pages has started using `npm` or something like that then perhaps the only solution is to include `node_modules` in source control so that GitHub Pages will be able to see it. Not a very pleasant solution if you ask me :( I've kind of moved on to other projects so I haven't really investigated this since 2018 – Matt Thomas Jan 24 '20 at 21:58

1 Answers1

1

First you need to make sure that your bootstrap sass file has no prepending two lines of 3 dashes, so in bootstrap.scss delete this.

---
---

After this open your config.yml file and add the following lines, my recommendation is to add a folder at root level called scss/ with all your scss files (this is a little vague here, for me it worked the best because there are a variety of posts suggesting it that way since sometimes Jekyll::Converters::Scss? seems to break the relative path).

sass:
  sass_dir: scss

And you should be good to go with @import "bootstrap.scss"; in your one of your other scss. In the other files you want to compile the .scss to .css so make sure to include the two lines of 3 dashes there and add them to your <head> as a .css file.

JasParkety
  • 131
  • 1
  • 6