Ionic, gulp unable to compile ionic sass

ionic-v1
1

Hi there, I’m new to ionic and I installed and maned to run the app. I then installed GULP and tried to run the watch but it keeps failing to compile the sass files that come with Ionic. I’ve checked the obvious things like the folder structure etc but I’m wondering if there is something else I need to do before running this?

This is the error message I keep getting when I run the watch.

stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: /Users/xx/Sites/myapp/www/lib/ionic/scss/scaffolding:10: error: no mixin named box-sizing
Backtrace:
/Users/xxx/Sites/myapp/www/lib/ionic/scss/scaffolding:10

2

So you’ve run ionic setup sass and got this error?

what does your ionic.app.scss file look like?

3

hi @mhartington,

I ran ionic setup sass & then npm update -g ionic to update – to version 1.2.4. The I ran gulp watch and got the error below. I then created a new app and went through the whole process again. I got the error again.

!-- ionic app scss

/*
To customize the look and feel of Ionic, you can override the variables
in ionic’s _variables.scss file.

For example, you might change some of the default colors:

$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #4a87ee !default;
$calm: #43cee6 !default;
$balanced: #66cc33 !default;
$energized: #f0b840 !default;
$assertive: #ef4e3a !default;
$royal: #8a6de9 !default;
$dark: #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: “…/lib/ionic/fonts” !default;

// Include all of Ionic
@import “www/lib/ionic/scss/ionic”;

!-- error

stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: EACCES, open ‘/Users/xxx/Sites/xxx/testApp/www/css/ionic.app.css’

4

This should be a permission issue, it causes if you run ionic setup sass with sudo(root access) and try to run/compile the scss without sudo(root access) . you can either

  • delete/change owner of these 2 files
    1. www/css/ionic.app.css and
  • www/css/ionic.app.min.css
    and then run “ionic serve” without the need of root access

OR

  • always run “sudo ionic serve”
6 Likes
5

similar error:

events.js:72
    throw er; // Unhandled 'error' event
          ^
Error: spawn ENOENT
    at errnoException (child_process.js:1000:11)
    at Process.ChildProcess._handle.onexit (child_process.js:791:34)
6

just ran into this issue as well. solved it by running “sudo ionic serve” after install gulp-sass globally and in the app directoy:

sudo npm install -g gulp-sass
sudo npm install gulp-sass
sudo ionic setup sass
sudo ionic serve
2 Likes
7

I also got this issue. Got it working by removing all my sass in the file. Then replaced bits until it broke again. It seemed to be an error with a media query targeting iphone 6 aspect ratio. hth

8

This worked for me, I always need to us:
sudo ionic serve

For the time being it’s fine :slight_smile:

9

@maheshep, Ran in to the same issue, but was able to fix from your first solution. Just by removing the www/css/ionic.app.css and www/css/ionic.app.min.css.

Thanks a lot

cheers

Sam

1 Like
10

This solved it for me!

11

Thanks !! The key was sudo

12

worked for me using sudo thx

13

Hi there, have anyone having trouble download setup sass by using this command line > ionic setup sass ?
For me, it gave me this error “setup” is not a valid task.