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

ARQUIVO CSS

Ola, Professores, Meu projeto não aceita o "style.css", o console do navegador retorna a seguinte mensagem:

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

lembrando que estou executando em NODE.js, isto nao acontece quando executo a pagina em HTML normal

8 respostas

Oi Luan, aparentemente está havendo uma confusão com os tipos de arquivos enviados pelo seu servidor. Ele carrega seu CSS, mas não aplica por que foi enviado como um HTML.

No minimo eu estranho isso. Como você está fazendo para carregar o CSS? Como estão suas configurações de assets?

Opa beleza Wanderson? espero que sim!

Então, acredito eu que esteja tudo correto... vou postar aqui o caminho que estou utilizando para acessar o css.

<link href="css/style.css" rel="stylesheet">

ele esta em uma pasta css e por isto esta nesse caminho...

e tambem vou postar aqui o link para acesso do meu .css

https://drive.google.com/open?id=1KYXc1-52TRg8byy85VbuK9qZfOcv0UOP

Ahh! lembrando somente algumas coisas, eu estou utilizando uma instancia AWS EC2 e estou utilizando Node.js, porem isto acontece em ambos, minha maquina e na Amazon...aguardo uma resposta!

Luan, como está o código de configurações do seu servidor node? É isso que quero dar uma olhada. Você está usando Express ou algum outro framework?

Ah sim, certo! estou usando o express, commonJs e o Nodemon para rodar o server apos atualizações... segue abaixo o fonte da configuração:

config

var app = require('./config/express')();

app.listen(9000, function(){
    console.log("Servidor rodando!");
});

e aqui é o express

express

var express = require('express');
var load = require('express-load');


module.exports = function(){
    var app = express();

    app.set('view engine','ejs')
    app.set('views', './app/views')

    load('routes',{cwd: 'app'})
        .then('infra')
        .into(app);

    return app;
}

Boa Luan, o problema é que você não configurou o servidor estático do Express. Para você poder acessar seus CSSs e JSs corretamente no HTML das páginas, você precisa disponibilizar eles de forma estática.

Logo depois de executar o express(), adicione a seguinte linha:

app.static('/public', 'CAMINHO_PASTA_CSS_JS')

Assim, você vai poder acessar seus CSSs usando o caminho /public/arquivo.css. Entende?

Opa Wanderson, Novamente, tentei de diversas maneiras antes de voltar aqui, pesquisei e tudo mais, porem apresenta uma mensagem no node:

TypeError: app.static is not a function at Object. (C:\Users\Luan\Desktop\CadastroWebTeste\cadastroWeb.js:2:11) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Function.Module.runMain (module.js:684:10) at startup (bootstrap_node.js:187:16) at bootstrap_node.js:608:3

acredito que nao esteja reconhecendo o comando .static

alguma ideia?

solução!

Poxa Luan, desculpa mesmo, eu errei como era a instrução. Chequei novamente na documentação, é assim:

app.use(express.static('public'))

O public é o nome da pasta onde os arquivos de css, js estáticos estão. Link da documentação caso queira ver mais: https://expressjs.com/en/starter/static-files.html

Desculpa mesmo, tá bem?

Wanderson, Muito obrigado, resolvido!! agora ele acessa os css tranquilamente, posso dar continuidade!!