Not access to variables.scss

Ionic Framework ionic-v3
1

hello,
i’m trying to change color of my button by the default colors of variables.scss(the file is exist in my ionic 2 project)
when i do for example or
it not change the color, why is that?
this is the code for example

  <ion-item-options side="right">
        <button secondary>
          <ion-icon name="create"></ion-icon>
          Edit
        </button>
        <button danger (click)="delete(xs.id_note)">
          <ion-icon name="trash"></ion-icon>
          Delete
        </button>
      </ion-item-options>
</ion-item-sliding>
2

I am using ionic 2 rc0,
with ionic 2 we have a file app.scss in app folder. This file is generally used for global styles and also to import other component/page level scss.

I am using like below and it works well for me.

//global styles
.toolbar-background{
    background: #f58220;
    border-color:#f58220;
}

.toolbar-title, .bar-button-default{
    color: #fff;
}
//importing other page level styles
@import "../pages/magazine/magazine";

@import "../pages/edit-member/edit-member";
3

hey, i see this scss file but i try to put there variables or import the variables.scss and still nothing change.
do i need to import the app.scss from the app.component.ts?

4

i did it for example
@import “…/theme/variables.scss”;
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
favorite: #69BB7B
);

and nothing change

5

If you are overriding ionic theme variable I think you need to do it in theme/variable.scss file itself.

check the first 2 lines.

6

i’m not overriding, i just want to use it.
i want to button to be primary color, it’s always gray, why is that?

7

have you tried changing it in variable.scss??

8

hey,
i don’t want to change nothing,
i just want to use it.
when i write
i want to see the primary color that was set by ionic 2 default

9

Button syntax has changed now in rc0, can you run ionic info and paste as well

<button ion-button color="secondary">
<ion-icon name="create"></ion-icon>
Edit
</button>
<button ion-button color="danger" (click)="delete(xs.id_note)">
<ion-icon name="trash"></ion-icon>
Delete
</button>
1 Like
10

can you share again? i don’t see the code

11

thanks dude it works perfect!!

1 Like
12

You shoud have posted on how it is rendering and it could have saved all confusion and time.

Check RC0 change log for further information on what things might break and also refer recent v2 docs for codes.

13

thanks. can you please see my new issue? My page stuck when i press logout button

14

You can do that

<button color="danger">