Gulp build giving undefined variable warning for styles task

Hi all

This is my first Sage project, and I’m having a little trouble getting gulp to properly build the styles for my theme. I’ve used roots-sass in previous projects with Grunt and had no problems, so wonder where I’m going wrong with Sage & gulp?

I’ve followed the Sage docs through to Step 7, updating Node, npm, Bower and gulp to latest versions:

  • Node: v0.12.0
  • npm: v2.5.1
  • Bower: v1.3.12
  • gulp: v3.8.11

But when I run gulp on the command line in the theme directory, all the build tasks run without error, except for the styles task which returns the following:

variable @grid-columns is undefined in file c:\path\to\project\wp-c
ontent\themes\mytheme\assets\styles\common\_variables.less line no. 2

When I navigate to that file, it is referencing the @grid-columns variable which I think should come from the less files in the Bootstrap directory within bower_components, but it seems it can’t get to it for some reason.

I have gone through the npm debugging guidelines pinned to this category, as well as totally re-cloning and rebuilding the theme directory, but I continue to get this warning and as a result none of the styles are built for the theme.

I’m running on a Windows 7 Ultimate x64 install.

Can anyone offer any thoughts?

Thanks in advance

The first big thing I notice is that your error is related to a LESS file. Are you trying to make a SASS project or a LESS project? You mentioned SASS in your question.

Thanks for the reply.

It looks like Sage is looking for LESS in this project, which I am fine with. I only mentioned SASS as I have used the roots-sass theme previously.

The files that are pulled into the Bootstrap directory in bower_components are all LESS.

That error makes it seem like the Bootstrap dependency in the bower_components directory doesn’t exist, but you’re saying that the files are all there?

Can you try removing the directory and doing bower install again?

Thanks - I’ve just tried that but I’m still getting the same warning when running gulp. The files are definitely in the bower_components directory, but it just seems like they’re not being picked up by the gulp build.

Does your project have this file? https://github.com/roots/sage/blob/master/.bowerrc

Yep - it has that file.

Curiously, I followed the guidance to use bootstrap-sass-official instead - https://github.com/roots/sage/blob/master/assets/styles/main.scss.example - and this compiled right away with no warnings.

SASS is my preference anyway, but I’m still wondering why this didn’t work for the LESS files.

Thanks for all the help so far.

This topic was automatically closed after 24 hours. New replies are no longer allowed.