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.
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.
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.