Sage: Gulp looks for .less instead .scss

[DennisKo]

When running gulp on a fresh install of the most current Sage I get:

[08:55:20] Starting 'styles'...
'layouts/tinymce.less' wasn't found. Tried - C:\xampp\htdocs\kt-mai\wp-content\themes\sage-master\assets\styles\layouts\tinymce.less,layouts\tinymce.less in file C:\xampp\htdocs\kt-mai\wp-content\themes\sage-master\assets\styles\main.scss line no. 19

node 6.1.0
gulp 3.9.1
windows 10

[adriandmitroca]

+1

This bug started after update to Node 6.x.

[DennisKo]

Fixed with a downgrade to Node v4.4.4!

[adriandmitroca]

Downgrade isn't really a fix.

[joshmanders]

Upgrade gulp-if to latest version should fix it.

[SkullMasher]

@joshmanders Thanks for the suggestion running ncu -a returned the following.

 del                 ^1.2.1  →  ^2.2.0 
 gulp-autoprefixer   ^2.3.1  →  ^3.1.0 
 gulp-flatten         0.1.1  →   0.2.0 
 gulp-if             ^1.2.5  →  ^2.0.1 
 gulp-imagemin       ^2.3.0  →  ^3.0.1 
 gulp-jshint        ^1.11.2  →  ^2.0.1 
 gulp-rev            ^6.0.0  →  ^7.0.0 
 wiredep             ^2.2.2  →  ^4.0.0 

After the upgrade the message still appears. scss can't compile.

Running node v6.1.0 on Debian if that matters...

[SkullMasher]

I commented those line on yourawesometheme/gulpfile.js (line 88 to 90) to continue working on my project since I don't use less.

.pipe(function() {
  return gulpif('*.less', less());
})

[nmfzone]

@retlehs It still exists until now, maybe because sage repo in composer still not include that fix "Update gulp-if". So, when the version (after that fix) comes up to sage repo in composer?

[samkarpluk]

I set up the roots-example-project yesterday and got this error when I ran gulp. Commenting out lines 88-90 from the gulpfile.js file made the error go away.

Node: 6.3.0
Gulp: 3.9.1

[jasperf]

Still an issue. see https://discourse.roots.io/t/compiling-new-scss-error-less-not-found/7312/5 where I talked about it.

[ciromattia]

Nope, you have to update gulp-if (see 2d3f25b above)

[nmfzone]

@ciromattia I think everyone knows that. But the problem is sage repo in composer still not include that fix "Update gulp-if". So, i think everyone who doesn't know this issue (or maybe new user) still face the error.

[simonh1000]

So, I have just ran into this error the first time I tried to recompile my installation post-upgrading to Node 6.x (using Sage 8.3.1). I'm not at all clear from the above what to do, and simply upgrading gulp-if, and commenting out the lines suggested by @SkullMasher, just led to a different error throw new TypeError('Path must be a string. Received ' + inspect(path));. If I upgrade to the latest (stable) Sage, will it work again - @nmfzone seems to be suggesting not?

[nmfzone]

@simonh1000 I think your problem doesn't fully relate to this issue, because you still use the older version of Sage. At least use version 8.4.2, then update your gulp-if to 2.0.1. Hope that helps.

[rossyoung5]

I am still running into this issue. I've updated gulp-if and commented out lines 88-90 in gulpfile.js. When I run gulp it just hangs on styles:

[15:42:19] Using gulpfile /Applications/MAMP/htdocs/dnortho/wp-content/themes/dnortho/gulpfile.js
[15:42:19] Starting 'clean'...
[15:42:19] Finished 'clean' after 3.81 ms
[15:42:19] Starting 'default'...
[15:42:19] Starting 'build'...
[15:42:19] Starting 'wiredep'...
[15:42:19] Finished 'default' after 197 ms
[15:42:19] Finished 'wiredep' after 222 ms
[15:42:19] Starting 'styles'...

I've uninstalled/reinstalled node, npm, bower, gulp; kinda at a loss as to why it's getting stuck here. Any thoughts?

[rossyoung5]

Oh also using node 4.4.4, sage 8.4.2, gulp 3.9.1

[thisolivier]

@rossyoung5 I think that's a different issue, node 4.4.4 shouldn't be affected, indeed downgrading was an early solution to the problem. Gulp can hang on styles for a number of reasons, are you sure it's related to gulp looking for .less files?

[rossyoung5]

@thisolivier At one point I had the same error as @DennisKo, and after downgrading node it went back to hanging up on styles. I think it's related somehow, but I am having trouble identifying the cause. My coworker is using the same sage project and can gulp with no issues. I've made sure we're using the same versions of all build tools. You said there are a number of reasons it might be hanging up, I'd love to hear any you'd be willing to share. Thanks!

[thisolivier]

@rossyoung5 I'd be happy to, but I don't think this is the right thread to work on it (especially if your colleague has the same setup and is able to gulp without issues). If you create a topic in the roots discourse I'd be happy to contribute.

[rossyoung5]

@thisolivier Great will do, thanks.

[rossyoung5]

@thisolivier https://discourse.roots.io/t/gulp-hanging-up-on-styles-during-compile-and-wont-complete/7832

[CatinhoCR]

I am also getting this error.
Using sage 8.4.2 on an old client's website, with node 7.4.0 and gulp-if 4.0.5.
Been playing with the node versions a lot lately and everytime I switch to this old versions of sage I need to run a npm rebuild node-sass somewhy, probably not related tough.

Commenting the lines gulpfile from 88 to 90 fixed the compilation issue for now, a temporary fix that worked but would like to get more light into what might be wrong.

[emieldesmidt]

If you don't want to downgrade node, or avoid using less, you can do the following fix that I've found on another blog: In the gulpfile.js file you change the order of the lines regarding *.scss and *.less. It should look like this:
.pipe(function() { return gulpif('*.scss', sass({ outputStyle: 'nested', // libsass doesn't support expanded yet precision: 10, includePaths: ['.'], errLogToConsole: !enabled.failStyleTask })); }) .pipe(function() { return gulpif('*.less', less()); })

credits go to MariamLachhab at https://discourse.roots.io/t/layouts-tinymce-less-wasnt-found/6645/5

[aaegorof]

The best workaround that i found was very SIMPLE !
Just add to your manifest the main.less file... Like so:

"main.css": {
      "files": [
        "styles/main.less",
        "styles/main.scss"
      ],
      "main": true
    }

That will COMBINE together less and SASs

If you will not get the result done, you can upgrade gulp-if to 2.0.1

[jitchavan]

Upgrade gulp-if to latest version should fix it. This still works in 2018.