Search code examples
csssassgulpbourbonneat

Gulp with Bourbon/Neat, no mixin named media


I'm taking over a project and I can't get gulp to compile the CSS, I get the error:

Error: assets/sass/pages/_global.sass
Error: no mixin named media

       Backtrace:
        assets/sass/pages/_global.sass:86
        on line 86 of assets/sass/pages/_global.sass
     @include media($md) {

But everything appears to be included properly and the mixin is there/included before this section. I've used SASS before but no gulp or bourbon, so I'm a bit stumped on this one.

Here's the CSS from that section:

body
  +padding(45px 0 0 0)
  -webkit-font-smoothing: antialiased
  font-family: 'Lato', sans-serif
  overflow-x: hidden
  +margin(40px 0 0 0)
  color: $ft_dark_brown
  +media($md)
    +padding(113px 0 0 0)

Solution

  • If you install "neat" using the npm package manager, it is set to version 1.9.1 - both the default version and @latest. So you may have been trying to access a mixin that had a different name in that version.

    If anyone is getting a similar error after installing via npm, use the specific version you wish to use, e.g. npm install bourbon-neat^2.0.0

    Edit:

    It is not set to 1.9.1, but rather the most recently update by date. And as bourbon/neat maintain multiple releases (I think 2.x.x and 3.x.x now), the default version may not be the actual newest version. I believe there was a recent fix that now allows npm install bourbon-neat@latest to point to the highest version number.