# Gulp compile error in old sage project... no mixin "make-col-ready"

**URL:** https://discourse.roots.io/t/gulp-compile-error-in-old-sage-project-no-mixin-make-col-ready/11707
**Category:** sage
**Tags:** gulp
**Created:** 2018-02-23T17:16:37Z
**Posts:** 18

## Post 1 by @brightsite — 2018-02-23T17:16:37Z

Hi guys,

Am trying to update an older Sage project (8.5.0) to include parallax scrolling… when trying to compile using gulp I get an error…

> assets/styles/components/\_grid.scss  
> Error: no mixin named make-col-ready
> 
> ```
> Backtrace:
> assets/styles/components/_grid.scss:3
> on line 3 of assets/styles/components/_grid.scss
> ```
> 
> > > @include make-col-ready();  
> > > -----------^

\_grid.scss is not customized (just uses default code).

Any ideas how to resolve this?

Mike

---

## Post 2 by @mmirus — 2018-02-23T17:21:09Z

Hey @brightsite - do you have Bootstrap loaded? (Can you share your `bower.json` file?)

---

## Post 3 by @brightsite — 2018-02-23T17:42:36Z

Hi @mmirus, thanks for the quick response…

Yes, bootstrap is loaded.

bower.json is unmodified too:

```
{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "https://github.com/twbs/bootstrap/tree/v3.3.7"
  }
}
```

The staging site is here: [http://staging.wesleybec.com.au](http://staging.wesleybec.com.au)

Am including jquery.stellar.js via CDN in a script tag.

---

## Post 4 by @mmirus — 2018-02-23T18:06:09Z

Hey @brightsite - Hm, the `make-col-ready` mixin wasn’t in Boostrap until version 4. You may need to update your `_grid.scss` to use the Boostrap 3 equivalent. I think that would be `make-<size>-column`, where size is a breakpoint name, like ‘sm’.

[This](https://github.com/roots/sage/blob/d635063570302b544235af9aec6259024a479f99/assets/styles/components/_grid.scss) was the default Sage `_grid.scss` file from before Boostrap 4, as an example.

Was this theme previously building without error when you ran `gulp`, with the same `_grid.scss` and Bootstrap version? It’s odd a) that it’s not building now if you didn’t change those things, and b) that your `_grid.scss` is out of sync with the version of Bootstrap you’re using. I could be missing something else, though.

---

## Post 5 by @brightsite — 2018-02-23T21:18:22Z

Thanks @mmirus, yes this was previously working.

Have probably upgraded bootstrap globally working on more recent Sage/Roots projects. So maybe that’s why this has cropped up.

Mike

---

## Post 6 by @mmirus — 2018-02-23T21:33:35Z

@brightsite - Very strange. It actually looks more like your Sage `_grid.scss` was updated than your Bootstrap was–but either way, did changing `_grid.scss` to use the Bootstrap 3 mixins fix the build process completely, or are you still getting an error?

---

## Post 7 by @brightsite — 2018-02-23T23:04:50Z

Hmm, no @mmirus. When I try to use the old \_grid.scss file and run gulp again I get the error with make-sm-column this time.

> assets/styles/components/\_grid.scss  
> Error: no mixin named make-sm-column
> 
> ```
> Backtrace:
> assets/styles/components/_grid.scss:3
> on line 3 of assets/styles/components/_grid.scss
> ```
> 
> > > @include make-sm-column($main-sm-columns);

---

## Post 8 by @mmirus — 2018-02-23T23:15:50Z

@brightsite I was afraid that wouldn’t fix it. Are you using a version control system like Git, by any chance, so you could hopefully see a comprehensive set of changes since the site was working last?

Also, I’m assuming this isn’t the issue, but to cover the bases I would double check that a) Bootstrap is being imported in your `main.scss` file before your `_grid.scss` file is being imported and b) if you customized your Bootstrap to only import specific components, make sure the grid mixins are being imported.

---

## Post 9 by @brightsite — 2018-02-23T23:25:20Z

Yes @mmirus. I use Bitbucket primarily. Looks like there have only been four commits on this project.

Hmm, I don’t see Bootstrap being imported at all in main.scss. It looks like this:

```
@import "common/variables";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
// endbower

@import "common/global";
@import "common/type";
@import "common/headings";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/grid";
@import "components/nav";
@import "components/wp-classes";
@import "pages/home";
@import "pages/about";
@import "pages/locations";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";
```

I don’t think bootstrap has been customized at all.

Thanks for your assistance on this @mmirus. I really appreciate it.

---

## Post 10 by @brightsite — 2018-02-23T23:26:56Z

Doesn’t this line in head.php take care of the bootstrap css?

`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">`

---

## Post 11 by @mmirus — 2018-02-23T23:36:27Z

@brightsite aaah, yes, but that `<link>` only imports the CSS. The errors we’re seeing are generated because missing SASS mixins are being called in your grid file (because the Bootstrap SCSS files aren’t being imported in your `main.scss`).

If you aren’t doing anything at all that requires incorporating Bootstrap into your build system (instead of just loading Bootstrap’s CSS), and you aren’t actually relying on the stuff in `_grid.scss` that is calling Bootrap mixins, I would remove the `@import "components/grid";` line from your `main.scss` file.

If you are using the output of `_grid.scss` (or the output of any other SCSS file that’s relying on having access to Bootstrap mixins, variables, etc.), then I would remove the `link` element from `head.php` and run `bower install`. That should update your `main.scss` file to import Bootstrap (if not, we can manually update it).

Let me know if that helps!

– Matt

---

## Post 12 by @brightsite — 2018-02-24T00:21:34Z

Hmm, ok. Commenting out that import just means that I get errors in other places. Like this…

```
Error: Undefined variable: "$spacer".
        on line 13 of assets/styles/components/_wp-classes.scss
>> margin: ($spacer / 2) auto;
   -----------^

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: assets/styles/components/_wp-classes.scss
Error: Undefined variable: "$spacer".
        on line 13 of assets/styles/components/_wp-classes.scss
>> margin: ($spacer / 2) auto;
   -----------^

    at options.error (/Users/[username]/Sites/www.wesleybec.com.au/wp-content/themes/wb2016/node_modules/node-sass/lib/index.js:286:26)
```

Am sure I ran bower install when setting up for this project. Obviously the environment has changed due to something else I’ve done I guess. Maybe just run it again?

---

## Post 13 by @mmirus — 2018-02-24T01:09:26Z

@brightsite `$spacer` is a Bootsrap 4 variable. It’s like somehow your style files got overwritten from a newer version of Sage. When you compare your current files to your repository (either the current state of your repo or previous commits), do you see different versions of `_grid.scss` or `_wp-classes.scss`?

You have a few options:

1. Fix everything for Bootstrap 3 (revert all SCSS files that are calling BS4 variables or mixins to a copy from a previous version of Sage and run `bower install`).
2. Fix everything for Bootstrap 4 (this is potentially more challenging and risky depending on your theme). See here: [Sage 8 legacy sites and Bootstrap 4 stable version](https://discourse.roots.io/t/sage-8-legacy-sites-and-bootstrap-4-stable-version/11382)
3. Go with the Bootstrap CSS file you’re including in your head template. (Which would require removing the imports for files that are calling Bootstrap SASS variables or mixins, or modifying those files so they don’t use those things.)

---

## Post 14 by @brightsite — 2018-02-24T16:55:05Z

Hi @mmirus,

Ah, okay. I realised what’s going on. I was had two sets of folders for this project on my dev machine. The site files and a set of staging site files. I had previously been successfully building in the staging site files and then tried to do it yesterday in the main site files folder.

Apologies for the confusion here. But I think the staging site project is in better order. Going to try making my changes there and then compiling.

Regards,

Mike

---

## Post 15 by @brightsite — 2018-02-24T17:27:55Z

Looks like the main.scss file in the project folder where I was having trouble was missing the crucial line:

`@import "../../bower_components/bootstrap/scss/bootstrap.scss";`

---

## Post 16 by @MWDelaney — 2018-02-24T17:50:00Z

If you’re doing this, you probably don’t also need the `<link>` tag in your header, so make sure you remove that to cut down on load time!

---

## Post 17 by @brightsite — 2018-02-24T19:16:41Z

Thanks @MWDelaney, good point!

---

## Post 18 by @mmirus — 2018-02-26T16:52:24Z

Ha, that explains a lot @brightsite. Glad you got it sorted out.