CODEWITHSUNDEEP
sassionic2
Caius
Caius

Reputation: 2264

Global css rules in ionic 2 does not work

I'm trying to declare some basic css rules to use them globally in my app. Like pull-rx, pull-lx and so on...

After writing these rules into app.scss, the main.css file inside the build folder gets updated correctly, but when it comes to use one of these rules inside a "LoginPage" for example, each of the rules I've declared before are ignored. Am I missing something?

If I write the pull-rx class inside the login.scss file instead, it will work. Is there a way to get a class globally?

app.scss:

.pull-rx {
    float: right !important
}

.pull-lx{
    float: left !important
}

app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
  ],
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }

login.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Astrid <small><i>Beta</i></small> <span class="pull-rx">Login</span>
    </ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>

</ion-content>

Upvotes: 2

Views: 2770

Answers (1)

Caius
Caius

Reputation: 2264

I've figured this out. Since Ionic uses scsss as preprocessor, I have to set the semicolons ";" at the end of the rule. Since I am used to code in sass that were causing the problem.

Upvotes: 1

Related Questions