Carregamento de CSS na página principal | Angular 2: webapps ainda mais poderosas parte 2

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso Angular 2: webapps ainda mais poderosas parte 2

por LUIZ PAULO PAMPU

| 135.1k xp | 15 posts

Olá,

estou com dificuldade de usar um CSS que criei próprio para uma página, o HTML do index está da seguinte forma:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta charset="utf-8">
  <!-- Title-->
  <title>Lires Golden</title>
  <!-- declaração do CSS  -->
  <link href="./css/color-schemes/gold.css" id="changeable-colors" rel="stylesheet" type="text/css" />
  <!-- /.CSS Ends -->
</head>

<body>
  <app-root></app-root>
</body>

</html>

Porém ao rodar o projeto aparece o seguinte erro no console:

Refused to apply style from 'http://localhost:4200/css/color-schemes/gold.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

estou usando o CLI para desenvolver essa aplicação.

2 respostas

solução!

por Vinícius de Morais Mussato

| 567.4k xp | 407 posts

Front-end mobile developer

19/04/2018

Remova o link do index, no seu arquivo .angular-cli.json localize o array de estilos:

"styles": [
    "styles.css"
  ],

Adicione o seu arquivo

"styles": [
    "styles.css",
    "./css/color-schemes/gold.css"
  ],

Reinicie o server.

Fonte Tutorial

Abraços

por LUIZ PAULO PAMPU

| 135.1k xp | 15 posts

20/04/2018

Valeu, só tava me batendo um pouco mas achei o que faltava depois no componente eu tenho carregar ele também

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    '../css/color-schemes/gold.css',
]
}