Need help with adding Borbon/Neat to Hugo

Hi,

New to the community and Hugo (thank you for the great SSG Hugo team!) so apologize if
the question was answered before. :slight_smile:
I am trying to import bourbon/neat/bitters to Hugo but for some reason I am getting
File to import not found or unreadable: bourbon
so I hoped that someone more experienced can advise me what’s wrong here
(maybe the paths, directory architecture etc.?)

Thank you in advance. :slight_smile:

sass src/stylesheets/all.css.scss static/css/all.css
Error: File to import not found or unreadable: bourbon.
       Load path: /home/user/PROJECTS/project-hugo
        on line 3 of src/stylesheets/all.css.scss

bundle show bourbon
/usr/lib/ruby/gems/2.1.0/gems/bourbon-4.0.2

Gemfile:

source 'https://rubygems.org'

gem 'sass'
gem 'bitters'
gem 'bourbon'
gem 'neat'

My directory architecture:

PROJECT
- archetypes
- content
- layouts
- public
- src
 -- stylesheets
  --- base
  all.css.scss
- static
 -- css
 all.css
config.yaml
Gemfile

Update: All.css.scss content

  @charset "utf-8";

  @import "bourbon";
  @import "bitters/bitters";   /* Bitters needs to be imported before Neat */
  @import "neat";

Just an update … I managed to install Bourbon/Neat but not with the gem install.
I had to install all dependencies in the stylesheets directory.
I will still appreciate if someone shares more elegant way to do this :slight_smile:

These libraries are unknown to me, but my tip would be to try posting these questions in a bourbon/neat forum.

Thank you @bjornerik

I actually did but my question is not so much about how to use Bourbon/Neat but mostly
how to correctly add it to Hugo. I.e. how to structure the directories etc.
Right now I put the dependencies in to src/stylesheets directory and the compiled CSS file
is in the static/css.
Is this the right approach?

Aha! OK, now I understand.

Kind of similar to my setup.

I have all my dependencies under /assets

so

/assets
    /less
    /js

I use Grunt to build these - but it should be similar to you - so the compiled CSS and concat. JS ends up in static/css etc.

So yes - your approach makes perfectly sense. Wether you name your folder src, assets whatever …

2 Likes

Thank you for sharing your workflow @bjornerik
Glad to know that I am on the right track. :slight_smile:

Hi,

Here’s what I did:

$ hugo new site hugo-site-dir
$ cd hugo-site-dir
$ mkdir -p src/{css,font,img,js}
$ cd src/css
$ bourbon install
$ cd ../.. # now in hugo-site-dir
$ cat > config.rb <<EOF
heredoc> require 'compass/import-once/activate'
heredoc> # Require any additional compass plugins here.
heredoc>
heredoc> # Set this to the root of your project when deployed:
heredoc> http_path = "/"
heredoc> css_dir = "static/css"
heredoc> sass_dir = "src/css"
heredoc> images_dir = "src/img"
heredoc> javascripts_dir = "src/js"
heredoc> fonts_dir = "src/font"
heredoc>
heredoc> output_style = :nested
heredoc>
heredoc> # To enable relative paths to assets via compass helper functions. Uncomment:
heredoc> # relative_assets = true
heredoc>
heredoc> line_comments = false
heredoc> color_output = false
heredoc>
heredoc> preferred_syntax = :scss
heredoc> EOF

The top of my main.scss (in src/css) is

@import "bourbon/bourbon";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/selection";
@import "variables";
@import "responsive";

(_variables.scss and _responsive.scss are my own thing, and live in src/css).

I use Bower to manage dependencies and install a few things under src and a makefile to run the whole thing (for your purposes, running compass compile). I have previously installed compass and bourbon with gem install, but I think you could do that with Bower (I’m far from a frontend person). After make runs, I end up with everything my site needs under static, where it’s picked up by Hugo.

Good luck!