Can't get Bootstrap sass to work with gh-pages

Help
1

I installed Bootstrap via npm and imported it in my sass files. It works fine on my localhost but when I upload on Github, I get
Your site is having problems building: Your SCSS file assets/main.scss has an error on line 1: File to import not found or unreadable: ../node_modules/bootstrap/scss/functions. Load paths: _sass /hoosegow/.bundle/ruby/2.4.0/gems/jekyll-theme-primer-0.5.3/_sass.

My main.scss

@import "../node_modules/bootstrap/scss/functions";
@import "variables";
@import "../node_modules/bootstrap/scss/bootstrap";

My config.yml has

sass:
  sass_dir: _sass
2

Taking a wild guess here.

Most Git repos gitignore the node_modules folder, which is where all of your Bootstrap sass files are located.

You’ll need to commit these and push up to Github so it can have access to them in order to build your site. It works locally because those files are in your repo from installing from npm.

3

Thanks for the reply mrmistakes,
But I followed this article and according to that, node_modules are purposely excluded in the git repo.

My thought process was, everytime I ran ‘Jekyll Build’ it compiled the scss into main.css and since this building is done only in the localhost, it would be alright to not include the node_modules in github.
But does github rebuild my site when I upload it?

4

You can host on GH by either pushing the source of your site and having GH build it, or you can push the _site folder and have GH serve that.

It sounds like you are pushing the source, which GH then builds, I doubt that GH would build your site even if you pushed the node modules folder as that seems like a bad idea on their end.~ I think if you push the node modules folder it would work as it looks like it is just scss. But if you use Gulp or other things that use the node modules folder you will end up with thousands of files that may be a pain to keep in the repo.

You can push the _site folder and do it that way.

Or use bootstrap differently - like build the site locally and then take the css it makes and copy it, but then you would no longer be using sass. I don’t use BS but I would think you could use their sass files without needing node?

1 Like
5

in reading that article it looks like it is just using jekyll to compile the sass that is in the node modules folder - maybe if you copy the scss directory contents and put it in the _sass folder it would work? obviously making sure the path is correct and not using the paths it has for node modules.I don’t see anything else being referenced.

Again I don’t use BS so I could be totally wrong.

6

rdyar, I like the idea of only pushing _site to the repo. I am planning to use this site as a portfolio along with some blog posts, do you think that pushing _site to the main branch for hosting and pushing the rest to a dev branch as version control is the best solution for me?

7

Also, pushing node_modules is an option because I won’t be using much more packages. Which would be the better option?

8

I would think it is simpler if you can just push the source and have GH build the site.

I’d still see if you can get it to work by just copying the scss stuff from the node modules folder. To me that is much cleaner. Things like that are also good learning experiences if you can figure it out.