TransWikia.com

node js não renderiza o estilo css da página

Stack Overflow em Português Asked by Luiz Couto on November 22, 2021

Fui executar o Node em uma tela que tinha feito em CSS e HTML com Bootstrap e não carrega os estilos.

Failed to load resource: the server responded with a status of 404 (Not Found) *
Refused to apply style from ” because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Se alguém tiver uma solução, agradeço.

index.html

<aside class="logo">
  <img src="" alt="" class="logo">
</aside>

<header class="header">
  <h1><i class="fa fa-home"></i> Título</h1>
  <p>Subtitulo do sistema</p>
</header>

<aside class="menu-area">
  <nav class="menu">
    <a href="/"><i class="fa fa-home"></i> Inicio</a>
    <a wm-link="#/HTML/movimento.html"><i class="fa fa-edit"></i> Movimento</a>
    <a wm-link="#/HTML/setor.html"><i class="fa fa-clipboard"></i> Setor</a>
    <a wm-link="#/HTML/local.html"><i class="fa fa-map-marker"></i> Local</a>
    <a wm-link="#/HTML/tipo.html"><i class="fa fa-id-badge"></i> Tipo</a>
    <a wm-link="#"><i class="fa fa-file-text-o"></i> Relatórios</a>
  </nav>
</aside>

<main wm-link-destino class="content p-3">
  conteudo
</main>

<footer class="footer">
  <p class="mr-2">Produzido por <i class="fa fa-terminal">SISTCON</i></p>
</footer>
Fundamentos Sistema de Grid Componentes Formulários -->

app.js:

const express = require('express') const app = express()

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
})
app.get('/login', function(req, res){
  res.send("testando 2")
})
app.listen(2000)

Não ocorre a importação dos estilos da tela nem da parte de navegação do menu.

navegação.js:

$(document).ready(function(){

(function () { function navegarViaAjax(hash) { if (!hash) return

    const link = document.querySelector(`[wm-link='${hash}']`)
    if(!link) return

    const destino = document.querySelector('[wm-link-destino]')

    const url = hash.substring(1)
    fetch(url)
        .then(resp => resp.text())
        .then(html => {
            destino.innerHTML = html
            const resultado = html.match(/<script>([sS]*)</script>/)
            if(resultado && resultado.length >= 2){
                eval(resultado[1])
            }
        })
}

function configurarLinks() {
    document.querySelectorAll('[wm-link]')
        .forEach(link => {
            link.href = link.attributes['wm-link'].value
        })
}

function navegacaoInicial() {
    if (location.hash) {
        navegarViaAjax(location.hash)
    } else {
        const primeiroLink = document.querySelector('[wm-link]')
        navegarViaAjax(primeiroLink)//.hash
    }
}

window.onhashchange = e => navegarViaAjax(location.hash)

configurarLinks()
navegacaoInicial()
})()

})

One Answer

Amigo tente definir a rota estática do seus styles css:

app.use('/static', express.static(__dirname + '/public'))

você pode chamar assim no seu html:

/static/css/styles.css

No express para você chamar arquivos estáticos de styles ou JS vc define a rota estática deles.

Answered by Samuel Marques on November 22, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP