2016-12-12 3 views
2

私はアプリでグローバルに使用するための基本的なCSSルールを宣言しようとしています。 pull-rx、pull-lxなど...イオン2のグローバルなCSSルールが機能しない

これらのルールをapp.scssに書き込んだ後、buildフォルダ内のmain.cssファイルは正しく更新されますが、これらのルールのいずれかを使用するようになるとたとえば、 "LoginPage"の中で、私が前に宣言したそれぞれのルールは無視されます。何か不足していますか?

代わりにlogin.scssファイル内にpull-rxクラスを書き込むと動作します。クラスをグローバルに取得する方法はありますか?

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> 
+1

これは奇妙です。コードが正しいように見えます。私は自分のコードで再現しようとしましたが、期待どおりに動作しています。あなたの 'app.scss'がビルドに含まれていると確信していますか? – Matt

+0

こんにちは@Matt!答えてくれてありがとう、はいビルドは、main.cssにクラスを取得し、ええ、それは本当に奇妙です。私は今夜​​後にもう一度お試しになりますが、多分私は何か愚かなことを逃しています.- " – Caius

+0

私には一つのことがあります。あなたのログインマークアップは 'login.ts'タイトルの下に表示されます。私はこれがタイプミスであると仮定しています。 – Matt

答えて

1

。 Ionicはscssをプリプロセッサとして使用しているので、セミコロンを ";"ルールの終わりに私は問題を引き起こしていた草をコードするのに慣れているので。

関連する問題