Demo app and docs don't match up

I set up a demo app based on the instructions on here:
But the file structure that I wind up with doesn’t match up with the instructions in the SASS tutorial here:

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?


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.

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.

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

1 Like

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