This is probably a very basic question, but… after I installed the Bootstrap gem, how do I start using it? Do I have to import it in some way, or do I just start using it?
Have a look at the docs i.e. the github repo which should be linked from the rubygems page
And add a link here so we can see what you see.
The instructions will tell you what to do. You might have to add it to enabled plugins in Gemfile. And the asset might make some css or scss file available for you to import into your css files that get loaded in your head
While I waited for an answer here, I found this SOF answer. I followed the instructions - tho I put @import “bootstrap” in main.scss and not style.scss, whatever that is - but still got this error:
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
Error: File to import not found or unreadable: bootstrap. on line 2:1 of stdin >> @import "bootstrap"; ^
Error: Error: File to import not found or unreadable: bootstrap. on line 2:1 of stdin >> @import "bootstrap"; ^ (edited)
It depends on site. Or maybe you are using an external theme and you are adding Bootstrap to it
You can use main.scss or styles.scss
Make sure to add frontmatter like this.
I’ll see if i can make a mini site with the Bootstrap gem and share that repo
1 Like
I figured it out.
The StackOverflow link helped with figuring out the config change for sass path.
I had to tweak my .scss file to load from the gem.
Here is my repo with screenshot and instructions to run locally
I entered your changed into my directory, and it generated this error:
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
Error: File to import not found or unreadable: bootstrap-5.1.0/assets/stylesheets/bootstrap. on line 2:1 of main.scss >> @import "bootstrap-5.1.0/assets/stylesheets/bootstrap" ^
------------------------------------------------
Jekyll 4.2.0 Please append `--trace` to the `serve` command
for any additional information or backtrace.
------------------------------------------------
Traceback (most recent call last):
29: from C:/Ruby27-x64/bin/jekyll:23:in `<main>'
28: from C:/Ruby27-x64/bin/jekyll:23:in `load'
27: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/exe/jekyll:15:in `<top (required)>'
26: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
25: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
24: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
23: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
22: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
21: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
20: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
19: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `each'
18: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
17: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:36:in `process'
16: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:65:in `build'
15: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:28:in `process_site'
14: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:80:in `process'
13: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:211:in `render'
12: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `render_pages'
11: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `each'
10: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:539:in `block in render_pages'
9: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:547:in `render_regenerated'
8: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:63:in `run'
7: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:84:in `render_document'
6: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `convert'
5: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `reduce'
4: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `each'
3: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:106:in `block in convert'
2: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:185:in `convert'
1: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/sassc-2.4.0-x64-mingw32/lib/sassc/engine.rb:50:in `render'
main.scss:2: Error: File to import not found or unreadable: bootstrap-5.1.0/assets/stylesheets/bootstrap. (SassC::SyntaxError)
on line 2:1 of main.scss
>> @import "bootstrap-5.1.0/assets/stylesheets/bootstrap"
^
28: from C:/Ruby27-x64/bin/jekyll:23:in `<main>'
27: from C:/Ruby27-x64/bin/jekyll:23:in `load'
26: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/exe/jekyll:15:in `<top (required)>'
25: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
24: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
23: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
22: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
21: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
20: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
19: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
18: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `each'
17: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
16: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:36:in `process'
15: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:65:in `build'
14: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:28:in `process_site'
13: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:80:in `process'
12: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:211:in `render'
11: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `render_pages'
10: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `each'
9: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:539:in `block in render_pages'
8: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:547:in `render_regenerated'
7: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:63:in `run'
6: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:84:in `render_document'
5: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `convert'
4: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `reduce'
3: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `each'
2: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:106:in `block in convert'
1: from C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:182:in `convert'
C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:190:in `rescue in convert': Error: File to import not found or unreadable: bootstrap-5.1.0/assets/stylesheets/bootstrap. (Jekyll::Converters::Scss::SyntaxError)
on line 2:1 of main.scss
>> @import "bootstrap-5.1.0/assets/stylesheets/bootstrap"
^
Wait a minute… I get it. I have to use Ruby 2.7.0!
Nope, still doesn’t work. What am I missing?
Ruby 2 and 3 will work
It looks like using your global jekyll
Make sure to follow the docs
make install
make serve
And if you don’t have make on windows,you can do
bundle config set --local path vendor/bundle
bundle install
bundle exec jekyll serve --trace --livereload
Tried the second way, generates this error:
Unable to load the EventMachine C extension; To use the pure-ruby reactor, require 'em/pure_ruby'
Traceback (most recent call last):
22: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/bin/jekyll:23:in `<main>'
21: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/bin/jekyll:23:in `load'
20: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/exe/jekyll:15:in `<top (required)>'
19: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
18: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
17: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
16: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
15: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
14: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
13: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
12: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `each'
11: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
10: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:98:in `process'
9: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:143:in `register_reload_hooks'
8: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve.rb:143:in `require_relative'
7: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve/live_reload_reactor.rb:3:in `<top (required)>'
6: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve/live_reload_reactor.rb:3:in `require'
5: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/em-websocket-0.5.2/lib/em-websocket.rb:3:in `<top (required)>'
4: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/em-websocket-0.5.2/lib/em-websocket.rb:3:in `require'
3: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/eventmachine-1.2.7-x64-mingw32/lib/eventmachine.rb:8:in `<top (required)>'
2: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/eventmachine-1.2.7-x64-mingw32/lib/eventmachine.rb:8:in `require'
1: from C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/eventmachine-1.2.7-x64-mingw32/lib/rubyeventmachine.rb:2:in `<top (required)>'
C:/Users/mikwee/makor/vendor/bundle/ruby/2.7.0/gems/eventmachine-1.2.7-x64-mingw32/lib/rubyeventmachine.rb:2:in `require': cannot load such file -- 2.7/rubyeventmachine (LoadError)
Try without live reload flag
You madman, it actually works! Thank you so, so much!
1 Like
You need an extra gem on Windows to make livereload work and even then you might still have issues
If you wanna try.
Also if you don’t like the flow here you can always add the pieces you need from Bootstrap as CSS and JS files in head.
I have a demo site here that does that.
I don’t know what happens to variables though. Using scss like here might be better for compiling to css that uses your color or whatever overrides