Error using proper Ionic 2 css

Asked

Viewed 190 times

0

Css example:

.ion-content {

background-color: #000000;

}

home ts.

    import { Component } from '@angular/core';
    import { NavController, ViewController } from 'ionic-angular';
    import { HomeService } from './home.service';
    import { MenuPage } from '../menu/menu';


    @Component({
        selector: 'page-home',
        templateUrl: 'home.html',
        styleUrls: ['home.css'],
        providers: [
          HomeService
        ]
    })

Only it keeps returning error:

polyfills.js:3GET http://localhost:8100/home.css 404 (Not Found)
e @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
e.scheduleMacroTask @ polyfills.js:3
(anonymous) @ polyfills.js:3
send @ VM6726:3
ResourceLoaderImpl.get @ resource_loader_impl.js:44
DirectiveNormalizer._fetch @ directive_normalizer.js:40
(anonymous) @ directive_normalizer.js:130
DirectiveNormalizer._loadMissingExternalStylesheets @ directive_normalizer.js:130
DirectiveNormalizer.normalizeExternalStylesheets @ directive_normalizer.js:112
(anonymous) @ directive_normalizer.js:65
t.invoke @ polyfills.js:3
e.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
e.runTask @ polyfills.js:3
i @ polyfills.js:3
polyfills.js:3 Unhandled Promise rejection: Failed to load home.css ; Zone: <root> ; Task: Promise.then ; Value: Failed to load home.css undefined
o @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
invoke @ polyfills.js:3
polyfills.js:3 Error: Uncaught (in promise): Failed to load home.css
    at s (polyfills.js:3)
    at s (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at e.runTask (polyfills.js:3)
    at i (polyfills.js:3)
    at XMLHttpRequest.invoke (polyfills.js:3)
o @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
invoke @ polyfills.js:3

I want to change the background of the app and also use my css on other pages, what I’m doing wrong ?

angular ionic2

1 answer

1


Solution found:

Em home.scss:

.fundo {
  background-color: #000000;
}

and in home html:

<ion-content padding class="fundo">

  • Yes because you cannot indicate "ion-content" as a css class because it is already considered a directive. The solution ends up creating a separate class as the background, and then adding the class to the directive as you did.

Browser other questions tagged angular ionic2

You are not signed in. Login or sign up in order to post.