# Attempting to use sass watch **URL:** \ **Category:** uncategorized\ **Created:** [September 8, 2014, 1:18pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318 "2014-09-08T13:18:01Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 8, 2014, 1:18pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/1 "2014-09-08T13:18:01Z")
I have a new Ionic project running and have set it up to use sass. However, the sass documentation conflicts with that of the actual directory that you download. Does anyone know the correct watch command to use after starting a new Ionic project, this is the command shown in the docs, but this does not tally with the actual directory: ``` sass --watch scss/app.scss:css/app.css ``` Sass is compiling correctly upon manually using `gulp sass` but I need to get watch setup. Thanks! ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [September 9, 2014, 2:06pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/2 "2014-09-09T14:06:26Z")
I actually wrote a more update version of working with sass for the learn site [http://learn.ionicframework.com/videos/sass/](http://learn.ionicframework.com/videos/sass/) [http://learn.ionicframework.com/formulas/working-with-sass/](http://learn.ionicframework.com/formulas/working-with-sass/) ---
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 9, 2014, 2:22pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/3 "2014-09-09T14:22:31Z")
Thanks, but that doesn’t really resolve what I’m looking to achieve. Which sass file do I need to be watching? What would the command for this be based on the default directory? ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [September 9, 2014, 2:25pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/4 "2014-09-09T14:25:56Z")
Well no it does resolve your issue, as it explains where you should be writing you scss code. ./ | |-scss |–ionic.app.scss | |-www This is not the correct way to use sass with ionic `sass --watch scss/app.scss:css/app.css` But the video does explain the correct way to set things up. ---
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 9, 2014, 3:09pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/5 "2014-09-09T15:09:18Z")
I’ve followed the same steps as outlined in the video. But the docs don’t align with the directory. What is ‘not the correct way to use sass with ionic’? Sass is working perfectly, but I can’t start heavily customising the project until the watch task is successfully working. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [September 9, 2014, 3:11pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/6 "2014-09-09T15:11:02Z")
The docs on the site are outdate, the learn site has the most up to date. It is based off this section > **[ionic-team/ionic-cli](https://github.com/ionic-team/ionic-cli)** > > ionic-cli - The Ionic Command Line Utility ---
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 9, 2014, 3:20pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/7 "2014-09-09T15:20:59Z")
So `ionic serve` should automatically watch for changes? ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [September 9, 2014, 3:26pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/8 "2014-09-09T15:26:53Z")
Yep, it will watch for changes and update everything ---
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 9, 2014, 3:38pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/9 "2014-09-09T15:38:24Z")
Huh, well I’ll have to try that again then, because so far my attempts have not been successful. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [September 9, 2014, 3:39pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/10 "2014-09-09T15:39:13Z")
What version of the ionic cli do you have? ```auto $ ionic -v ``` It should be 1.2.3 ---
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 9, 2014, 8:04pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/11 "2014-09-09T20:04:45Z")
I’m on Version 1.2.3 I setup a new project, ran the following command… and it still **doesn’t** watch sass and reload the changes: ``` $ npm install -g ionic $ ionic start myapp tabs $ ionic setup sass $ionic serve ``` Still no luck! ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [September 9, 2014, 8:41pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/12 "2014-09-09T20:41:30Z")
Odd, are you on a mac? Did you include sudo? Are there any errors coming up in your console? ---
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 9, 2014, 8:55pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/13 "2014-09-09T20:55:43Z")
Yep, used sudo for `npm install -g ionic` on a Mac. No errors on the console, here is what is outputted on running `ionic serve` > Running dev server: [http://10.0.1.19:8100](http://10.0.1.19:8100) > Running live reload server: [http://10.0.1.19:35729](http://10.0.1.19:35729) > Ionic server commands, enter: > restart or r to restart the client app from the root > goto or g and a url to have the app navigate to the given url > consolelogs or c to enable/disable console log output > serverlogs or s to enable/disable server log output > quit or q to shutdown the server and exit > [21:54:52] Using gulpfile ~/myapp/gulpfile.js > [21:54:52] Starting ‘sass’… > [21:54:52] Starting ‘watch’… > [21:54:52] Finished ‘watch’ after 7.25 ms > CSS changed: www/css/ionic.app.css > [21:54:52] Finished ‘sass’ after 502 ms > CSS changed: www/css/ionic.app.min.css ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [September 9, 2014, 10:06pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/14 "2014-09-09T22:06:35Z")
Hmm, not sure what could be causing the issue. I just tested this out on my macbook pro and it worked fine for me. What file are you editing? Whats your version of ruby and sass on your mac? ---
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 9, 2014, 10:35pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/15 "2014-09-09T22:35:28Z")
I’m editing the _variables\_scss_ file for instance, no change takes effect on save. Running `Sass 3.4.3 (Selective Steve)` Running Ruby `2.1.1p76` ---
**Author:** ![iwantwin](https://avatars.discourse-cdn.com/v4/letter/i/94ad74/32.png) [@iwantwin](https://forum.ionicframework.com/u/iwantwin)\ **Post date:** [September 9, 2014, 11:06pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/16 "2014-09-09T23:06:47Z")
Please bump tomorrow, I’ll be posting what I use 😉 To tired now and without bump I might forget. ---
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 10, 2014, 7:51am UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/17 "2014-09-10T07:51:50Z")
Interested to hear the solution you’ve come up with regarding this… 😃 ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [September 10, 2014, 1:34pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/18 "2014-09-10T13:34:41Z")
Could be that your are editing the `_variables.scss` file. The watch isn’t watching that file, only the `scss/` directory at the project root. When working with sass with ionic, you should only work in that directory, since the ionic scss can change with new versions. ---
**Author:** ![olliejackson](https://avatars.discourse-cdn.com/v4/letter/o/c5a1d2/32.png) [@olliejackson](https://forum.ionicframework.com/u/olliejackson)\ **Post date:** [September 10, 2014, 8:51pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/19 "2014-09-10T20:51:36Z")
Okay, so now I see that it is watching the _scss/_ folder - meaning if I override a variable in this folder, the changes takes effect immediately. But - that surely doesn’t mean I have to just use overrides? I want to heavily customise Ionic and therefore use _@import_ to break up the code. Does sass watch not taken into account changes made in files that are referenced in an _@import_? ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [September 10, 2014, 11:24pm UTC](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318/20 "2014-09-10T23:24:31Z")
Hmm, I see what you mean. It does and it doesn’t. So if you create and import a new file in that root scss directory, the changes do get passed. But you have to save the ionic.app.scss file specifically. Soo a quick trick would be this ```auto gulp.task('sass', function(done) { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./www/css/')) .pipe(minifyCss({ keepSpecialComments: 0 })) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest('./www/css/')) .on('end', done); }); ``` Originally this line: ```auto gulp.src('./scss/*.scss') ``` was ```auto gulp.src('./scss/ionic.app.scss') ``` By changing it, we can process all the files in the in the directory at once. I’ll bring this up to the devs in the morning. [Next page](https://forum.ionicframework.com/t/attempting-to-use-sass-watch/9318.md?page=2)