Ionic 2 RC3 where i have add particular page theme scss file in my app folder

Ionic Framework ionic-v3
1

Ionic 2 am try to import login page scss file theme in variable.scss. But it shows on error.

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic’s
// default are overridden.

@import “ionic.theme.default”;

@import “…/pages/login/page-login”;

ERROR
sass: F:/IonicExamples/MyApp2/src/theme/variables.scss, line: 64
File to import not found or unreadable: …/pages/login/page-login Parent style sheet:
F:/IonicExamples/MyApp2/src/theme/variables.scss

  L64:  @import "../pages/login/page-login";

[00:00:59] sass update failed

2

page-login is selector? or scss file.

Scss file in login folder will get compiled on run time and I think it gets merge into one single file. So if you have any style in page-login.scss would get applied to the element.

3

It is scss file. And am written a style in page-login.scss but that style not affecting. When am importing variable.scss file that time only shows a error. suppose am comment it it not shows that above the error. Give a some sample code because of am a newbie in ionic

4

your html file name is page-login.html?

if it is login.html then you should have login.scss which will get compiled. I think you have page-login as selector. Which you can use to add class like as follow

page-login{
.class-name{}
}

5

Its working thanks @garrykapoor

6

Glad to know that its working.
Would you like to share some info, how did you make it work? Might be helpful for others.

Cheers.

7

Open variable.scss

Add your Page component scss. In the below code i highlight the code.

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic’s
// default are overridden.

@import “ionic.theme.default”;

@import “…/pages/login/login”;

NOTE
This is applicable for IONIC 2 RC >=0 version only.

That’s it.