Compiling new scss, error .less not found

sage
1

Just started a new project for which I am importing a lot of scss files. I added two to main.scss:

@import "common/variables";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower

@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/grid";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";
//newly added styles
@import "layouts/layout";
@import "layouts/common-styles";

and now during compiling it says

'layouts/common-styles.less' wasn't found. Tried - /Users/jasperfrumau/webdesign/imagewize.nl/ianua/web/app/themes/ianua/assets/styles/layouts/common-styles.less,layouts/common-styles.less in file /Users/jasperfrumau/webdesign/imagewize.nl/ianua/web/app/themes/ianua/assets/styles/main.scss line no. 22

and

npm -v
3.10.5
node -v
v6.3.1

Did remove bower_components and node_modules directories and reran npm install and bower install. This did not help. Running Gulp I did see one warning:

(node:23501) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

But updating it did not help:

npm install -g graceful-fs graceful-fs@latest
/usr/local/lib
└── graceful-fs@4.1.5 
gulp
(node:24497) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version
.....

and again:

[15:45:44] Starting 'styles'...
'layouts/common-styles.less' wasn't found. Tried - /Users/jasperfrumau/webdesign/imagewize.nl/ianua/web/app/themes/ianua/assets/styles/layouts/common-styles.less,layouts/common-styles.less in file /Users/jasperfrumau/webdesign/imagewize.nl/ianua/web/app/themes/ianua/assets/styles/main.scss line no. 22

Also happend when I installed it locally

npm install graceful-fs graceful-fs@latest
sage@8.4.2 /Users/jasperfrumau/webdesign/imagewize.nl/ianua/web/app/themes/ianua
└─┬ gulp-sourcemaps@1.6.0
  └── graceful-fs@4.1.5

same issue running gulp.

Not sure what the issue is. Very strange it is looking for less while it should look for a scss.

2

Well removed the theme and reinstalled all. Then I added _layout.scss again in the folder layouts and included it inside main.scss and now I get:

Starting 'styles'...
assets/styles/layouts/_layout.scss
Error: Undefined variable: "$zindex-2".
        on line 21 of assets/styles/layouts/_layout.scss
>>    z-index: $zindex-2;  
   ------------^

progress I guess…

3

OK. Included all needed scss properly now and all compiles. Why I ever got the initial error only God knows. But all good now.

5

I’ve gotten the same error as well, I was confused why a .less file wasn’t being found when everything was SASS. However, my fix was reverting back to Node v5 :blush:

7

This issue is actually a Node problem that’s documented on GitHub: https://github.com/roots/sage/issues/1648

3 Likes
8

Thanks @cfx and @kalenjohnson . Might have to downgrade then.

9

This is a Node Version Management tool, through you can select node version 5 with n 5.

Then in order for gulp command to work, I also needed to run npm rebuild node-sass.

1 Like