Fix The Permission Issue With Ionic And SASS

If you want to use SASS instead of CSS you probably use the Guide Using SASS from the ionic team. With the command ionic setup sass ionic is ready to use SASS.

For a first test, I put at the end of the SASS file scss/ionic.app.scss following one-liner which makes everything red:* { background: red !important; color: red; }

Now we start the ionic project with ionic serve and want to see our project layout dyed in red.

rschulz@MacBook-Pro:~/www/ionic/public$ ionic serve
Gulp startup tasks: [ 'sass', 'watch' ]
Running live reload server: http://localhost:35729
Watching : [ 'www/**/*', '!www/lib/**/*' ]
Running dev server: http://localhost:8100
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 $ [10:58:42] Using gulpfile ~/www/ionic/public/gulpfile.js
[10:58:42] Starting 'sass'...
[10:58:43] Starting 'watch'...
[10:58:43] Finished 'watch' after 10 ms
stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: EACCES, open '/Users/rschulz/www/ionic/public/www/css/ionic.app.css'
    at Error (native)

Ups, what happened here? The ionic application can’t open the compiled CSS file css/ionic.app.css – let us check the file permissions:

rschulz@MacBook-Pro:~/www/ionic/public$ ls -al www/css
drwxr-xr-x  5 rschulz  staff   170B Jul  1 10:53 ./
drwxr-xr-x  9 rschulz  staff   306B Jul  1 10:58 ../
-rw-r--r--  1 root     staff   219K Jul  1 10:53 ionic.app.css
-rw-r--r--  1 root     staff   172K Jul  1 10:53 ionic.app.min.css
-rw-r--r--  1 rschulz  staff    42B Jul  1 10:49 style.css

We can see that the new files css/ionic.app.css and css/ionic.app.min.css are created by root. To access the files with scripts they are running with the user rschulz wont never work. What shall we do now? Based on the user I guess the ionic setup sass command to build the SASS files and more was run as root: sudo ionic setup sass. You can now fix the problem in two ways.

The first way is to change the user for both CSS files:

rschulz@MacBook-Pro:~/www/ionic/public$ sudo chown -R rschulz:staff www/css/ionic.app*
Password:

Or delete the files and ionic will create them and set the the same user under which it runs:

rschulz@MacBook-Pro:~/www/ionic/public$ sudo rm www/css/ionic.app*
Password:

After that we start the ionic project once again:

rschulz@MacBook-Pro:~/www/ionic/public$ ionic serve
Gulp startup tasks: [ 'sass', 'watch' ]
Running live reload server: http://localhost:35729
Watching : [ 'www/**/*', '!www/lib/**/*' ]
Running dev server: http://localhost:8100
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 $ [11:03:40] Using gulpfile ~/www/ionic/public/gulpfile.js
[11:03:40] Starting 'sass'...
[11:03:40] Starting 'watch'...
[11:03:40] Finished 'watch' after 10 ms
CSS changed:  www/css/ionic.app.css
[11:03:41] Finished 'sass' after 1.27 s
CSS changed:  www/css/ionic.app.min.css
[11:03:46] Starting 'sass'...
CSS changed:  www/css/ionic.app.css
[11:03:47] Finished 'sass' after 1.41 s
CSS changed:  www/css/ionic.app.min.css

All the former permission error messages are gone and ionic runs with SASS like a charm.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn