Demo app and docs don't match up

ionic-v1
1

I set up a demo app based on the instructions on here: http://ionicframework.com/getting-started/
But the file structure that I wind up with doesn’t match up with the instructions in the SASS tutorial here: http://ionicframework.com/tutorials/customizing-ionic-with-sass/

The SASS instructions say to download the latest version of Ionic, and give a recommended file structure that looks like this:

  • css/
    • app.css (processed CSS file that will automatically be generated)
  • fonts/
  • img/
  • js/
  • scss/
    • ionic/ (entire scss directory copied from the download, then renamed to “ionic”)
    • app.scss (your app’s custom Sass file)
  • index.html

But the demo app that is generated using “ionic start myApp sidemenu” gives you this file structure:

  • css
  • img
  • js
  • lib
    • ionic
      • css
      • fonts
      • js
      • scss
  • templates

The tutorials and demos are great for helping noobies like me, but having them not match up makes things a little hard to follow.

  1. Which file structure is better to use?

  2. The SASS instructions say to use this command to watch the sass files “sass --watch scss/app.scss:css/app.css”, but I don’t have a scss/app.scss file anywhere, even though I do have a www/lib/scss/ionic-app.scss file. Is that the one I should be watching?

Thanks.

2

I noticed this as well, and am looking for answers to the same questions.

The starter (sidemenu) project generated doesn’t match up with the docs.

3

Hey there guys, thanks for pointing this out. Those docs are a little out of date, but can be updated :smile:
For the most recent way of using sass with the ionic CLI, check out the main repo fore the app base.

I will address this tonight.

4

Great, thanks! I was able to get by just poking around with the CLI app.

1 Like
5

Thanks Mike.

I was able to get to work by uncommenting the following, and installing gulp (npm install gulp) + modules.

<!-- IF using Sass (run gulp sass first), then remove the CSS include above
<link href="css/ionic.app.css" rel="stylesheet">
-->

Note that in order to get “gulp sass” to run successfully requires the installation of several modules in addition to gulp. I kept running it and installing the necessary modules when it errored (5 or 6); might worth pointing out that these are required? It also did not seem to work when doing npm install -g gulp, only the local npm install gulp which installs in the node_modules folder of the project.

1 Like