Gulp sass is not working

ionic-v1
1

Hey all,

I’ve got an ionic related problem. In my current project, I can compile sass with a line I write myself…

All commands are executed from my project’s root folder
This works:

sass --watch scss:www/css

While this doesn’t: (it did before!)

gulp sass

or

ionic setup sass

Basically, I think there is something wrong in the gulp sass task… But I can’t really figure it out. sass is working fine, same for gulp and ionic.

I’m using ionic lib: v1.0.0-beta.13
And ionic cli: 1.2.12

My app.scss looks like this:

/*To make sass automatically convert this file, navigate to project root and run: sass --watch scss:www/css*/
@import "styles/_variables.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";
@import "_ion_ext";

(It continues, but errors persist when I comment all. Error resolves if _ion_ext is commented. )

_ion_ext is obviously supposed to mean, ionic_extend, and is (one of) my custom scss file.

_ion_ext uses sass maps (which has worked for weeks and weeks, and first noticed the break yesterday!)

_ion_ext looks like this: (what it does, for every color type, add border color automagically to bars

$ion-colors: (
        light: $light,
        stable : $stable,
        positive : $positive,
        calm : $calm,
        balanced : $balanced,
        energized : $energized,
        assertive : $assertive,
        royal : $royal,
        dark : $dark
);

@each $ion-color-name, $ion-color-value in $ion-colors {
  .bar.#{$ion-color-name}-border {
    border-color: #{$ion-color-value};
  }
  .item.#{$ion-color-name}-border {
    border-color: #{$ion-color-value};
  }
}
2

@mhartington you wrote the sass part of ionic tutorials, do you have any clue on this? I’m totally puzzled… I’m not blocked though since the manual pure sass method works, this is highly undesirable though :wink:

3

Hmm, not sure to be honest.

1.2.12 had an issue in it, so we pushed 1.2.13 yesterday.
I just created a project and ran ionic setup sass, worked fine for me.

gulp sass works for me as well.

It could have to do with you loading _variables.scss and ionic.scss.

Try removing that and using the default setup for the scss file.

/*
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:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !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";