Error running gulp sass

I start with ionic. Many people faced the same mistakes but i tried all answers I found, I didn’t get a result.

When I ran : ionic setup sass, i got this error at the end

Successful npm install

    Updated F:\Documents\SED\Appli\Demo\www\index.html <link href> references to sass compiled css

Ionic project ready to use Sass!
 * Customize the app using scss/ionic.app.scss
 * Run ionic serve to start a local dev server and watch/compile Sass to CSS

F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:22
    throw new Error('`libsass` bindings not found. Try reinstalling `node-sass`?');
    ^

Error: `libsass` bindings not found. Try reinstalling `node-sass`?
    at getBinding (F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:22:11)
    at Object.<anonymous> (F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:188:23)



at Module._compile (module.js:434:26)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\index.js:3:17)
at Module._compile (module.js:434:26)

Exception with  (CLI v1.6.4)

Your system information:

Cordova CLI: 5.3.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
OS: null
Node Version: v4.0.0

I tried to re-install gulp and I got this error :

$ npm install gulp-sass
npm WARN package.json demo@1.0.0 No repository field.
npm WARN package.json demo@1.0.0 No README data
npm WARN package.json demo@1.0.0 No license field.
npm WARN deprecated pangyp@2.3.2: use node-gyp@3+, it does all the things





> node-sass@2.1.1 install F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass
> node scripts/install.js

Can not download file from https://raw.githubusercontent.com/sass/node-sass-binaries/v2.1.1/win32-x64-node-4.0/binding.node

> node-sass@2.1.1 postinstall F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass
> node scripts/build.js

gyp WARN install got an error, rolling back install
gyp ERR! configure error
gyp ERR! stack Error: 404 status code downloading 64-bit node.lib
gyp ERR! stack     at Request.<anonymous> (F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass\node_modules\pangyp\lib\install.js:403:20)
gyp ERR! stack     at emitOne (events.js:82:20)
gyp ERR! stack     at Request.emit (events.js:169:7)
gyp ERR! stack     at Request.onRequestResponse (F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass\node_modules\pangyp\node_modules\request\request.js:1255:10)
gyp ERR! stack     at emitOne (events.js:77:13)
gyp ERR! stack     at ClientRequest.emit (events.js:169:7)
gyp ERR! stack     at HTTPParser.parserOnIncomingClient (_http_client.js:415:21)
gyp ERR! stack     at HTTPParser.parserOnHeadersComplete (_http_common.js:88:23)
gyp ERR! stack     at Socket.socketOnData (_http_client.js:305:20)
gyp ERR! stack     at emitOne (events.js:77:13)
gyp ERR! System Windows_NT 10.0.10240
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "F:\\Documents\\SED\\Appli\\Demo\\node_modules\\gulp-sass\\node_modules\\node-sass\\node_modules\\pangyp\\bin\\node-gyp" "rebuild"
gyp ERR! cwd F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass
gyp ERR! node -v v4.0.0
gyp ERR! pangyp -v v2.3.2
gyp ERR! not ok
Build failed
gulp-sass@1.3.3 node_modules\gulp-sass
├── clone@0.1.19
├── map-stream@0.1.0
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, beeper@1.1.0, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, object-assign@3.0.0, replace-ext@0.0.1, minimist@1.2.0, vinyl@0.5.3, chalk@1.1.1, lodash.template@3.6.2, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.11)
└── node-sass@2.1.1 (get-stdin@4.0.1, object-assign@2.1.1, replace-ext@0.0.1, chalk@0.5.1, cross-spawn@0.2.9, semver@4.3.6, mkdirp@0.5.1, meow@3.3.

thanks in advance

1 Like

It’s rather a question to ask to the node-sass project on github.

OS null could be the reason why it failed downloading correct binaries though it seems to be an issue only with ionic-cli (maybe you should report it on Ionic github project)
Also you’re using latest node version which is very recent, you’d be safer using node 0.12.x

Finally, you’re on Windows which is a pain for Node and more you’re on Windows 10.
So you’re playing with fire here.

how to specify the verion of node i have to download ?
I’m watching a tutorial, and the guy in the tuto use windows 10 and he doesn’t have these mistakes.

I had the same problem @teddykossoko. Try deleting your existing /node_modules directory (backup first) and running npm update while in your project folder.

Has to do with the way node handles installs. What version of node are you running?

Few things that Windows users should know about Node:

  • don’t install it under c:\programs as it requires administrator rights and could cause EPERM errors later, rather use something like c:\node or even better use nodist tool
  • install python 2.7 not 3.x
  • install visual studio build tools
  • don’t create your project directory under a deeply nested folder as Windows has limit of 254 chars for whole path and npm use deeply nested folders under local node_modules
1 Like

I have done what you said, I got this error

`ERR! stack     at emitOne (events.js:82:20)
gyp ERR! stack     at Request.emit (events.js:169:7)
gyp ERR! stack     at Request.onRequestResponse (F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass\node_modules\pangyp\node_modules\request\request.js:1255:10)
gyp ERR! stack     at emitOne (events.js:77:13)
gyp ERR! stack     at ClientRequest.emit (events.js:169:7)
gyp ERR! stack     at HTTPParser.parserOnIncomingClient (_http_client.js:415:21)
gyp ERR! stack     at HTTPParser.parserOnHeadersComplete (_http_common.js:88:23)
gyp ERR! stack     at Socket.socketOnData (_http_client.js:305:20)
gyp ERR! stack     at emitOne (events.js:77:13)
gyp ERR! System Windows_NT 10.0.10240
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "F:\\Documents\\SED\\Appli\\Demo\\node_modules\\gulp-sass\\node_modules\\node-sass\\node_modules\\pangyp\\bin\\node-gyp" "rebuild"
gyp ERR! cwd F:\Documents\SED\Appli\Demo\node_modules\gulp-sass\node_modules\node-sass
gyp ERR! node -v v4.0.0
gyp ERR! pangyp -v v2.3.2
gyp ERR! not ok
Build failed
gulp-sass@1.3.3 node_modules\gulp-sass
├── clone@0.1.19
├── map-stream@0.1.0
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reinterpolate@3.0.0, beeper@1.1.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, object-assign@3.0.0, replace-ext@0.0.1, minimist@1.2.0, chalk@1.1.1, vinyl@0.5.3, lodash.template@3.6.2, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.11)
└── node-sass@2.1.1 (get-stdin@4.0.1, object-assign@2.1.1, replace-ext@0.0.1, semver@4.3.6, shelljs@0.3.0, mkdirp@0.5.1, cross-spawn@0.2.9, chalk@0.5.1, npmconf@2.1.2, meow@3.3.0, nan@1.9.0, gaze@0.5.1, sass-graph@1.3.0, request@2.61.0, pangyp@2.3.2, mocha@2.3.2)

`

I install node in a folder named node but, the others opps can’t find node js because they go check in the programs. An I have python 2.7.9 installed and all visual studio tools.
But I have the same errors

You forgot to update your PATH

Finally I resolved the errors. I should use nodeJs v0.20.X version instead of v.4

I had trouble too.

Ionic Team, please make a priority to fix this : I fear you may lose some newbies just because of this issue. It’s not the first machine where I get the ionic setup sass error.

Here’s what worked for me, considering this setup :

Cordova CLI: 5.3.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X Yosemite
Node Version: v0.12.7
Xcode version: Xcode 6.4 Build version 6E35b

You may want to follow these steps :

  1. sudo npm install -g n
  2. sudo n 0.12.7
  3. sudo npm install node-sass@2
  4. sudo npm -g install node-gyp@3
  5. sudo npm rebuild node-sass

After that, ionic serve runs OK.

Let me know how it goes for you. Not sure which exact step made the difference, sadly I am no node specialist…

7 Likes

yes it’s ok. Thanks a lot

Out of all suggestions, both here and on Stack Overflow, this is what worked for me. Thanks.

Edit: However, my Leaflet-map stopped working. What gives?

1 Like

I think you should include the css file.
Check your index file

  <link rel="stylesheet" href="css/leaflet.css" />
  <link rel="stylesheet" href="css/style.css" />
  <link href="css/ionic.app.css" rel="stylesheet">

What does the console have to say about it?
Maybe it’s better to post an issue on the leaflet-map Github page?

They were included. However, I just cloned my latest commit from last night and it ended up working out fine, so the problem was at least located locally.

If you’re on Windows then you might want to try the Ionic Box:

https://github.com/driftyco/ionic-box

Seems to be the easiest way to get Ionic working under Windows.

You might be right. I managed to recreate the error now. As soon as I run ionic setup sass, my leaflet map goes blank…

Edit: Also, my footer gets placed beneath my header, until I refresh the browser window manually.

Edit 2: The latter problem was resolved by putting my <ion-footer-bar> outside of my <ion-content>. Duh.

Edit 3: Solved. Running ionic setup sass replaced my style.css with ionic.app.css. Adding a line to my header including my style.css solved the whole shabang.

Thanks, this helped and it works now!

1 Like

Edit 3

Don’t forget that with Sass, it doesn’t have to be one or another :
you can include / import “as many” files as you wish.

  1. Copy the content of your style.css into a style.scss (.scss) file (or maybe a less generic name).
  2. At the very beginning, import your ionic.app.css (or you could point to ionic.app.scss) using Sass @import. At the beginning, because you may want to use a global / brutal override on a ionic element/class later on.
  3. alter the gulpfile.js to process style.scss and compile it to the proper target file, style.css, in the www/css folder. Just follow the default gulpfile.js, you don’t have to be a gulp specialist, just change the origin and destinations paths.
1 Like

Had to go and login just to say thank you. Like others, I’ve been all over looking for a fix for this. Cropped up when I upgraded to a new box and had to get everything back up and running. You saved me a lot of headaches!

If you’re here having trouble and tried a lot of various things, run through the steps that @bonatoque listed.

1 Like