Como declaro o CSS no component de Angular 2


(Estevão Oliveira) #1

Declarei o CSS conforme o código abaixo mas não funciona, o que posso ter feito de errado?

@Component({
selector: 'comprar',
templateUrl: 'comprar.html',
styleUrls:['comprar.scss'],
providers: [VitrineService]
})


(Luan Maik) #2

Acredito que o angular não vai conseguir interpretar a extensão SCSS.
O que vc está fazendo é utilizando um pré compilador do css e que só será possivel de ser interpretado após sua compilação, que provavelmente terá o nome 'comprar.css', logo, altere a extensão de scss para css na linha styleUrls:['comprar.scss']


(Estevão Oliveira) #3

entao eu fiz isso, coloquei styleUrls:['comprar.css'] msm assim nao funcionou, quando atualizo o aplicativo ele nem abre a primeira tela fica tudo em branco


(Luan Maik) #4

Então o problema não é o css, abre o console e veja se está dando algum erro.


(Estevão Oliveira) #5

ele me da esse erro: "Unhandled Promise rejection: Failed to load novo-cliente.css ; Zone: ; Task: Promise.then ; Value: Failed to load novo-cliente.css undefined


(Luan Maik) #6

Provavelmente o angular não está conseguindo encontrar o caminho do CSS, utilize o atributo moduleId para ver se resolve:

tente:

@Component({
   moduleId: module.id,
   selector: 'comprar',
   templateUrl: 'comprar.html',
   styleUrls:['comprar.scss'],
   providers: [VitrineService]
})

ou:

@Component({
   moduleId: __moduleName,
   selector: 'comprar',
   templateUrl: 'comprar.html',
   styleUrls:['comprar.scss'],
   providers: [VitrineService]
})