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">
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!
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.
style.css
into a style.scss
(.scss) file (or maybe a less generic name).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.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.
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
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
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
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!
This solved my issue! Thanks
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
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