Error running gulp sass

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

thanks bonatoque! this works! But after i’ve solved css issue with

sudo ionic setup sass

for two times, the first has not completed to start sass

1 Like

That worked for me on my Mac, thanks!

FYI, This fix seems to work also for subsequent app installs.

“My” fix is a cross between a SO and a Ionic Forums hints, too bad I didn’t keep the URLs, anyway give your thanks to these guys.

Here’s a report (has Ionic CLI got verbose, all of a sudden?) of a fresh install :smile:

MyMac:~ user$ ionic start myApp tabs
Creating Ionic app in folder /Users/user/myApp based on tabs project
Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================]  100%  0.0s
Downloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip
[=============================]  100%  0.0s
Updated the hooks directory to have execute permissions
Update Config.xml
Initializing cordova project
Adding in iOS application by default
npm http GET https://registry.npmjs.org/cordova-ios
npm http 304 https://registry.npmjs.org/cordova-ios
npm http GET https://registry.npmjs.org/cordova-ios
npm http 304 https://registry.npmjs.org/cordova-ios
Added ios platform

Your Ionic project is ready to go! Some quick tips:

 * cd into your project: $ cd myApp

 * Setup this project to use Sass: ionic setup sass

 * Develop in the browser with live reload: ionic serve

 * Add a platform (ios or Android): ionic platform add ios [android]
   Note: iOS development requires OS X currently
   See the Android Platform Guide for full Android installation instructions:
   https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

 * Build your app: ionic build <PLATFORM>

 * Simulate your app: ionic emulate <PLATFORM>

 * Run your app on a device: ionic run <PLATFORM>

 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or ionic docs

Visit the Ionic docs: http://ionicframework.com/docs


New! Add push notifications to your Ionic app with Ionic Push (alpha)!
https://apps.ionic.io/signup
+---------------------------------------------------------+
+ New Ionic Updates for October 2015
+
+ The View App just landed. Preview your apps on any device
+ http://view.ionic.io
+
+ Invite anyone to preview and test your app
+ ionic share EMAIL
+
+ Generate splash screens and icons with ionic resource
+ http://ionicframework.com/blog/automating-icons-and-splash-screens/
+
+---------------------------------------------------------+
MyMac:~ user$ cd myApp/
MyMac:myApp user$ ionic setup sass
npmnpm WARN package.json myApp@1.0.0 No README data
npm WARN deprecated pangyp@2.3.2: use node-gyp@3+, it does all the things

> node-sass@2.1.1 install /Users/user/myApp/node_modules/gulp-sass/node_modules/node-sass
> node scripts/install.js


> node-sass@2.1.1 postinstall /Users/user/myApp/node_modules/gulp-sass/node_modules/node-sass
> node scripts/build.js

`darwin-x64-node-0.12` exists; testing
Binary is fine; exiting
gulp-rename@1.2.2 node_modules/gulp-rename

shelljs@0.3.0 node_modules/shelljs

gulp-util@2.2.20 node_modules/gulp-util
├── lodash._reinterpolate@2.4.1
├── minimist@0.2.0
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── vinyl@0.2.3 (clone-stats@0.0.1)
├── through2@0.5.1 (xtend@3.0.0, readable-stream@1.0.33)
├── lodash.template@2.4.1 (lodash._escapestringchar@2.4.1, lodash.values@2.4.1, lodash.templatesettings@2.4.1, lodash.defaults@2.4.1, lodash.keys@2.4.1, lodash.escape@2.4.1)
├── multipipe@0.1.2 (duplexer2@0.0.2)
└── dateformat@1.0.11 (get-stdin@5.0.0, meow@3.4.2)

gulp-concat@2.6.0 node_modules/gulp-concat
├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
├── concat-with-sourcemaps@1.0.4 (source-map@0.5.1)
└── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, beeper@1.1.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)

gulp-minify-css@0.3.13 node_modules/gulp-minify-css
├── memory-cache@0.0.5
├── bufferstreams@0.0.2 (readable-stream@1.1.13)
├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── clean-css@3.0.10 (commander@2.5.1, source-map@0.1.43)
└── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, beeper@1.1.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)

gulp@3.9.0 node_modules/gulp
├── interpret@0.6.6
├── deprecated@0.0.1
├── pretty-hrtime@1.0.1
├── archy@1.0.0
├── v8flags@2.0.10 (user-home@1.1.1)
├── minimist@1.2.0
├── tildify@1.1.2 (os-homedir@1.0.1)
├── chalk@1.1.1 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── semver@4.3.6
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── liftoff@2.2.0 (extend@2.0.1, rechoir@0.6.2, flagged-respawn@0.3.1, resolve@1.1.6, findup-sync@0.3.0)
├── 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, vinyl@0.5.3, lodash.template@3.6.2, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.11)
└── vinyl-fs@0.3.14 (graceful-fs@3.0.8, strip-bom@1.0.0, defaults@1.0.3, vinyl@0.4.6, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)

bower@1.5.3 node_modules/bower
├── is-root@1.0.0
├── junk@1.0.2
├── stringify-object@1.0.1
├── user-home@1.1.1
├── chmodr@0.1.0
├── abbrev@1.0.7
├── archy@1.0.0
├── opn@1.0.2
├── bower-logger@0.2.2
├── bower-endpoint-parser@0.2.2
├── graceful-fs@3.0.8
├── lockfile@1.0.1
├── lru-cache@2.7.0
├── nopt@3.0.4
├── retry@0.6.1
├── tmp@0.0.24
├── request-progress@0.3.1 (throttleit@0.0.2)
├── q@1.4.1
├── chalk@1.1.1 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── md5-hex@1.1.0 (md5-o-matic@0.1.1)
├── shell-quote@1.4.3 (array-filter@0.0.1, array-reduce@0.0.0, array-map@0.0.0, jsonify@0.0.0)
├── semver@2.3.2
├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
├── which@1.2.0 (is-absolute@0.1.7)
├── promptly@0.2.0 (read@1.0.7)
├── p-throttler@0.1.1 (q@0.9.7)
├── fstream@1.0.8 (inherits@2.0.1, graceful-fs@4.1.2)
├── mkdirp@0.5.0 (minimist@0.0.8)
├── rimraf@2.4.3 (glob@5.0.15)
├── glob@4.5.3 (inherits@2.0.1, once@1.3.2, inflight@1.0.4, minimatch@2.0.10)
├── fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.10)
├── tar-fs@1.8.1 (pump@1.0.0, tar-stream@1.2.1)
├── decompress-zip@0.1.0 (mkpath@0.1.0, touch@0.0.3, readable-stream@1.1.13, binary@0.3.0)
├── update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.1, semver-diff@2.0.0, latest-version@1.0.1)
├── bower-registry-client@0.3.0 (graceful-fs@2.0.3, request-replay@0.2.0, rimraf@2.2.8, lru-cache@2.3.1, async@0.2.10, mkdirp@0.3.5, request@2.51.0)
├── request@2.53.0 (caseless@0.9.0, aws-sign2@0.5.0, forever-agent@0.5.2, stringstream@0.0.4, oauth-sign@0.6.0, tunnel-agent@0.4.1, isstream@0.1.2, json-stringify-safe@5.0.1, node-uuid@1.4.3, qs@2.3.3, combined-stream@0.0.7, form-data@0.2.0, mime-types@2.0.14, tough-cookie@2.2.0, bl@0.9.4, http-signature@0.10.1, hawk@2.3.1)
├── cardinal@0.4.4 (ansicolors@0.2.1, redeyed@0.4.4)
├── github@0.2.4 (mime@1.3.4)
├── mout@0.11.0
├── bower-config@0.6.1 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1, mout@0.9.1)
├── insight@0.7.0 (object-assign@4.0.1, async@1.4.2, lodash.debounce@3.1.1, tough-cookie@2.2.0, configstore@1.2.1, os-name@1.0.3, inquirer@0.10.1)
├── configstore@0.3.2 (object-assign@2.1.1, xdg-basedir@1.0.1, uuid@2.0.1, osenv@0.1.3, js-yaml@3.4.2)
├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
└── inquirer@0.8.0 (ansi-regex@1.1.1, figures@1.4.0, mute-stream@0.0.4, through@2.3.8, readline2@0.1.1, chalk@0.5.1, lodash@2.4.2, cli-color@0.3.3, rx@2.5.3)

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, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, beeper@1.1.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, mkdirp@0.5.1, cross-spawn@0.2.9, chalk@0.5.1, npmconf@2.1.2, nan@1.9.0, gaze@0.5.2, meow@3.4.2, sass-graph@1.3.0, request@2.64.0, mocha@2.3.3, pangyp@2.3.2)

Successful npm install
Updated /Users/user/myApp/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

[01:40:04] Using gulpfile ~/myApp/gulpfile.js
[01:40:04] Starting 'sass'...
[01:40:05] Finished 'sass' after 1.38 s

Successful sass build
Ionic setup complete
MyMac:myApp user$ 

Here’s the Ionic CLI setup myApp was built on :

 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.5
Ionic App Lib Version: 0.3.9
ios-deploy version: 1.7.0 
ios-sim version: 5.0.1 
OS: Mac OS X Yosemite
Node Version: v0.12.7
Xcode version: Xcode 6.4 Build version 6E35b 

By the way, guys… Says Yosemite but :wink:

1 Like