Error running gulp sass

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

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