Error running gulp sass

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
[=============================]  100%  0.0s
[=============================]  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
npm http 304
npm http GET
npm http 304
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:

 * 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:

New! Add push notifications to your Ionic app with Ionic Push (alpha)!
+ New Ionic Updates for October 2015
+ The View App just landed. Preview your apps on any device
+ Invite anyone to preview and test your app
+ ionic share EMAIL
+ Generate splash screens and icons with ionic resource
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/
 * 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

I love Ionic, but every now and then I try to use SASS and give up. I can see others with the same issues when I search online, but none of the solutions fix the issue. Until now.

Thanks to @bonatoque for posting this, the only thing that has worked for me so far. I would love to know why. Even more so, I would love β€œIonic Setup Sass” to just work the way so much of everything else in Ionic seems to work…

sudo npm install -g n
sudo n 0.12.7
sudo npm install node-sass@2
sudo npm -g install node-gyp@3
sudo npm rebuild node-sass


Worked for me. Thank you!

1 Like

This solved my issue! Thanks :smile:

1 Like

Hi everyone!

I’ve just fixed problems with libsass or node-sass with this command:

$ sudo rm -rf node_modules/ && cat package.json | sed -i.bak 's/"gulp-sass": "^X.X.X"/"gulp-sass": "^2.0.4"/g' package.json && npm install && ionic lib update

Where X is the version of gulp-sass in your package.json


Remove the old files in node_modules. I’m not sure is necessary to use β€˜sudo’ (in my case, yes).

$ sudo rm -rf node_modules/

Search and replace inside package.json updating gulp-sass version to ^2.0.4. It also creates a backup (package.json.bak),

$ cat package.json | sed -i.bak 's/"gulp-sass": "^X.X.X"/"gulp-sass": "^2.0.4"/g' package.json

Reinstall dependencies

$ npm install

Update the ionic lib in the project

ionic lib update

If you have any further problems be sure I try can help you…



work like a charm…thanks you

FYI, seems fixed now with the latest CLI, as of 2015-11-23.

Thank you! It worked for me.

great solution! thanks

Thank you so much for this useful post