Item-right does not work as it should after upgrading to beta 4

Ionic Framework ionic-v3
1

My layout was working just fine until I upgraded to Beta 4. Wherever I had used item-right or item-left, it doesn’t work like it did before.

<ion-item>
<ion-thumbnail item-left>
      <ion-icon class="ion-ios-folder-outline" yellow></ion-icon>
</ion-thumbnail>
<h2> Title </h2>
<p>Paragraph</p>

<span item-right>Text Right</span>
</ion-item>

The span above, although has an item-right, get aligned to the left.
Any one else experiencing this?

2

I’m not able to reproduce this with beta.4. I made a plunker demo environment and it seems to work as expected. Could you take a look at it and check if I missed something or modify it so that the problem is reproduced there?

3

Thank you for your reply @iignatov.

I just found the reason was this error:

Error: Import directives may not be used within control directives or mixins.
on line 34 of node_modules/ionic-angular/components.core.scss
@import “fonts/ionicons”;

This is the code that was causing the error in node_modules/ionic-angular/components.core.scss;
> $ionicons: true !default;

@if ($ionicons) {
  @import "fonts/ionicons";
 }

When I commented the If condition out, everything is working as it should.

// @if ($ionicons) {
@import “fonts/ionicons”;
// }

Is this a bug? Is there a proper way to fix this?

4

Yes, there was an issue which is already fixed. The workaround is the one that you already made. For a proper fix I would suggest you to update your project to beta.6.