Sass in v1.0.0-beta.11 problem with background color : dark!

1

Hello,

I wanted to personalize my application with specific color.
I tried first on a blank project.
I followed the tutorial : http://ionicframework.com/tutorials/customizing-ionic-with-sass/

Here is the result that I obtain with a blank app :

As you can see, the header have a new color, but my

<ion-nav-view>
</ion-nav-view>

become so dark… and when I open the dev tools here is the css:

My scss file:

$light:                 #AAA;
$stable:                #f8f8f8;
$positive:              #4ea4be;

// Any variables you did not define will use the defaults
@import "ionic/ionic";

Am I missing something ?

Thanks

2

Maybe you should use #aaa instead of #AAA??
You never know.

3

Hello and thanks for your answer. However, this is the color for the header, not for the background. So yes, aaa is grey instead of kind of cyan, but the background remains dark.

4

Is there any other styles that you have? I just tried this and couldn’t reproduce your issue.

5

Nop. Here the step to reproduce:

  • ionic start newproject blank

  • Download on the ionic github the folder scss

  • On the newproject folder, www folder, create a scss folder.

  • In this folder, paste the scss folder and rename it ionic

  • Create a new .scss file called app.scss in the scss folder (not in the new ionic folder, this file is next the ionic folder) and inside this new folder copy past the scss file content displayed in my first post.

  • in console, execute sass file update:

    sass --watch scss/app.scss:css/app.css

now, on index.html:

remove

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

and add

<link href="css/app.css" rel="stylesheet">

In the html, remove

<body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>

and add:

<body>
<ion-nav-view>
</ion-nav-view>
</body>

Magic : the screen become dark because ion-nav-view have dark background …

And if on the index.html, we remove the

<link href="css/app.css" rel="stylesheet">

and add

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

Tada the screen is white again !

And even if you mix the two css file, screen remain dark.

Here is the test project:
https://mega.co.nz/#!cYh1gSLA!pkoKqHe1pf4SZfePgbij9L5er6t1FNpaeYYWDmIkXHw

Thanks.

6

No more news ? Can you reproduce the bug with my step ?

7

Sorry, been a bit busy the past few days.

Soo yeah, I looked at your project and I know what the issue is. You’re setting sass up incorrectly for ionic. Or more specifically, you’re writing you’re sass in the wrong place.

http://learn.ionicframework.com/videos/sass/

8

I followed the ionic framework help about this : http://ionicframework.com/tutorials/customizing-ionic-with-sass/
The problem is not sass, is the html structure (see my other problem : Ionic, router, and html page structure )

I use now “ionic setup sass” command, and ionic serve. Maybe it will be better to update the documentation relative to this ?

9

i have this problem too, i’ve simply put a background-color:white to the body… but yeah it could be usefull to understand why it goes like this