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-readyBacktrace: 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
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
Am including jquery.stellar.js via CDN in a script tag.
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 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.
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
@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?
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-columnBacktrace: assets/styles/components/_grid.scss:3 on line 3 of assets/styles/components/_grid.scss@include make-sm-column($main-sm-columns);
@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.
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.
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">
@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
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?
@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:
bower install).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
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";
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!