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

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

2 Likes

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

Explanation:

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…

Bye

3 Likes

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