Search code examples
coffeescriptbourbonneat

How to get bourbon-neat to work with Roots


So I'm experimenting with Roots Static Site generator and I'm having a hell of a time getting it to import Bourbon-neat through the app.coffee file.

My app.coffee looks like this:

js_pipeline  = require 'js-pipeline'
css_pipeline = require 'css-pipeline'
browserify   = require 'roots-browserify'
sass         = require 'node-sass'

module.exports =
  ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']

  extensions: [
    browserify(files: 'assets/js/main.coffee', out: 'js/build.js')
    js_pipeline(files: 'assets/js/*.coffee'),
    css_pipeline(files: 'assets/css/*.scss')
  ]

  'coffee-script':
    sourcemap: true

  jade:
    pretty: true

  sass:
    // includePaths: require('bourbon-neat').includePaths
    // includePaths: [require('bourbon-neat').includePaths]
    includePaths: ['node_modules/bourbon-neat/app/assets/stylesheets/']

The commented includePaths are other things I've tried. I've read the bourbon-neat docs that mentioned needing to pass require('bourbone-neat').includePaths but it doesn't seem to work.

The error I get when attempting to @import "neat" in my .scss file is:

Error: File to import not found or unreadable: neat.

Note: There doesn't seem to be a tag for root.


Solution

  • For anyone else looking, I was able to get this working. Here's my app.coffee:

    js_pipeline  = require 'js-pipeline'
    css_pipeline = require 'css-pipeline'
    browserify   = require 'roots-browserify'
    
    module.exports =
      debug:true
      ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']
    
      extensions: [
        browserify(files: 'assets/js/main.coffee', out: 'js/build.js')
        js_pipeline(files: 'assets/js/*.coffee')
        css_pipeline(files: 'assets/css/*.scss')
      ]
    
      'coffee-script':
        sourcemap: true
    
      jade:
        pretty: true
    
      scss:
          includePaths: require('bourbon-neat').includePaths