I'm not seeing my css changes dynamically using sass

As I understand it, I’m supposed to be editing the variables in www/lib/ionic/scss/_variables.scss but I’m wondering if ‘!www/lib/**/*’ below means that file is NOT being watched for changes? Also I’m not sure what permissions issue that EPERM is pointing to. I’m 777-ing everything for now, to no avail. Suggestions?

I ran:
ionic setup sass
gulp sass

//than I changed the link to the css file in index.html to point to the ionic.app.css

Then running “ionic serve” gives me:
Gulp startup tasks: [ ‘sass’, ‘watch’ ]
Running dev server: http://localhost:8100
Running live reload server: http://localhost:35729
Watching : [ ‘www//*’, '!www/lib//*’ ]
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

ionic $ [18:54:48] Using gulpfile ~/Desktop/testpen/gulpfile.js
[18:54:48] Starting ‘sass’…
[18:54:48] Starting ‘watch’…
[18:54:48] Finished ‘watch’ after 14 ms
CSS changed: www/css/ionic.app.css
events.js:85
throw er; // Unhandled ‘error’ event
^
Error: EPERM, chmod '/Users/me/Desktop/testpen/www/css/ionic.app.min.css’
at Error (native)

You shouldnt be editing any ionic files, or any files in lib for that matter.

create a scss folder in your project, create your own _myVariables.scss which is imported BEFORE ionic’s scss, that way you can override their variables.

check this out http://ionicframework.jp/tutorials/customizing-ionic-with-sass/

Thanks. I finally got this working simply by uncommenting and modifying the scss/ionic.app.scss file.

1 Like