Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Alterações no arquivo SCSS não se aplica ao app.

Olá, tudo bem?

Estou tentando fazer algumas alterações no visual do meu aplicativo, uma delas é no iPhone, pois o <ion-header> está sobrepondo o próprio header do dispositivo (onde aparece o horário e outras informações do celular).

Fui fazer um teste, porém as alterações que faço no arquivo SCSS, não são aplicadas ao app.

arquivo - home.html

<ion-header class="cabecalho">
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>AluraCar</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let car of cars" (click)="selecionaCarro(car)">
      <h2>{{car.nome}}</h2>
      <p>R${{car.preco}}</p>
    </ion-item>
  </ion-list>
</ion-content>

arquivo - home.scss

page-home {
    .cabecalho{
        background-color: green;
    }
}

Quando uso a ferramenta de inspecionar do navegador, aparece um arquivo main.css pórem não encontro este arquivo em meu projeto.

8 respostas

Boa noite, Murilo! Como vai?

Vc poderia colar aqui o conteúdo completo do seu arquivo home.ts para que eu possa dar uma olhada?

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Claro professor!

Segue código do arquivo home.ts:

import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController, IonicPage } from 'ionic-angular';
import { Car } from '../../models/carro';
import { HttpErrorResponse } from '@angular/common/http';
import { CarrosServiceProvider } from '../../providers/carros-service/carros-service';
import { NavLifeCycles } from '../../utils/ionic/nav/nav-lifecycles';
import { DetalhePage } from '../detalhe/detalhe';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage implements NavLifeCycles{
  public cars: Car[];

  constructor(public navCtrl: NavController, private _loadingCtrl: LoadingController,private _alertCtrl: AlertController, 
  private _carsService: CarrosServiceProvider) { } //FIM constructor

  ionViewDidLoad() { //é executado assim que a página carrega, é o inicializador

    let loading = this._loadingCtrl.create({
      content: 'Aguarde, carregando...'
    });

    loading.present();  //ativando loading

    this._carsService.lista()
    .subscribe(
      (carList) => {
        this.cars = carList;
        loading.dismiss();//encerrando loading
      }, 
      (err: HttpErrorResponse) =>{ //caso aconteça algum erro
        console.log(err);
        loading.dismiss();
        this._alertCtrl.create({
          title: 'Falha na conexão.',
          subTitle: 'Não foi possível carregar a lista de carros, tente novamente mais tarde.',
          buttons: [
            {text: 'Ok'}
            //{text: `It's not ok`} - outro exemplo botão
          ]
        }).present();
      }
    );
  }//FIM DO ionViewDidLoad

  selecionaCarro(car: Car){
    //trocando de página
    this.navCtrl.push(DetalhePage.name, {
      carSelected: car
    });
  }
}

Olá professor, você tem alguma dica em relação a questão acima?

Olá professor, você pode me ajudar nesse caso? Por favor

Opa, Murilo! Como vai?

Me perdoe pela demora na resposta! Outras demandas surgiram e eu não consegui participar tão ativamente do fórum. Mas aqui estou eu para te levar até à luz do conhecimento! Afinal de contas, como diz o ditado: antes tarde do que nunca! hahahaha

Veja que na classe HomePage vc faz

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

contudo, com essa declaração, vc não indicou qual arquivo scss quer utilizar! Para isso, utilize a propriedade styleUrls da seguinte forma:

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

A propriedade styleUrls recebe um array com os nomes dos arquivos de estilos que queremos aplicar no componente.

Faça essa correção e veja se as coisas funcionam da forma como vc esperava!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Muito obrigado professor e entendo a demora, tudo bem. Todo Paladino precisa de um descanso, tirar milhares de alunos das trevas e levar eles para a luz deve cansar.

Ainda não vou fechar o tópico professor, pois estou mexendo no projeto no meu trabalho. Então segunda feira eu faço alteração e já fecho o tópico caso esteja tudo ok.

solução!

Olá professor, tudo bem?

A solução que você recomendou, não funcionou. Quando eu rodava o código, o seguinte erro aparecia:

Failed to load home.scss

Então procurei na internet a solução e achei no fórum oficial do Ionic. Na realidade, invés de usar styleUrls, usei styles: [ 'home.scss' ] e funcionou perfeitamente.

Segue link do fórum - https://forum.ionicframework.com/t/failed-to-load-my-css-component-scss/124829/3

Opa, Murilo! Tudo certo?

Muito estranho isso! Como vc pode ver nessa página da documentação do Angular a opção styles é utilizada para passar valores de CSS inline enquanto que o styleUrls é para passar o caminho de arquivos CSS ( ou SCSS, no seu caso ), exatamente da forma como te mostrei! Inclusive, tenho diversos projetos funcionando utilizando o mesmo tipo de código que eu te mandei.

Sendo assim, eu imagino que pra não ter funcionado com vc, o seu projeto deve ter algo de diferente! Então eu sugiro que vc dê uma verificada no seu projeto para evitar qualquer tipo de surpresa no futuro!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!