I can’t load CSS and Javascript on my Node.js page

Asked

Viewed 2,635 times

1

I am unable to load the css and js, when running the server I get the following message on the console: "Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and Strict MIME checking is enabled". What can I do to make it right?

Below my server.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json());      
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/views'));

app.get('/', (req, res) => {
    res.sendFile('index.html')
})

app.listen(process.env.PORT || 3000,() => {
    console.log(`Rodando ${process.env.PORT || 3000}`);
});

inserir a descrição da imagem aqui

My folder structure above:

My index.html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Fast Answer</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="../public/bootstrap/node_modules/bootstrap/compiler/bootstrap.css">

  <!-- FONT AWESOME -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

  <!-- Material Design Bootstrap -->
  <link href="../public/css/home/bootstrap.min.css" rel="stylesheet">
  <link href="../public/css/home//mdb.min.css" rel="stylesheet">

  <!-- JQUERY -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- CSS DA HOME 
  <link href="../bootstrap/node_modules/bootstrap/compiler/homeStyle.css" rel="stylesheet">-->
  <link rel="stylesheet" href="../public/css/home/all.css">

  <!-- ICONE DO SITE -->
  <link rel="shortcut icon" type="image/png" href="../public/img/logoIcon.png">
</head>

<body data-spy="scroll" data-target="#navbar" data-offset="0">
  <!-- CONTEÚDO -->


  <!-- SCRIPTS -->
  <script src="../public/js/home/navbarChange.js"></script>
  <!-- <script src="js/scrollNav.js"></script> -->
  <script src="../public/js/home/animateBg.js"></script>
  <script src="../public/js/home/popUpLogin.js"></script>

  <!-- BOOTSTRAP SCRIPTS -->
  <script type="text/javascript" src="../public/js/home/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="../public/js/home/popper.min.js"></script>
  <script type="text/javascript" src="../public/js/home/bootstrap.min.js"></script>
  <script type="text/javascript" src="../public/js/home/mdb.min.js"></script>
</body>

</html>

javascript css html5 node.js

1 answer

2


Try to adjust the Static the same way Voce did for views only for the folder public and then in the links of the html file, remove the ../public/ of the CSS and Javascript files. It would look like this:

To the app.js:

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

and for the links in HTML:

<link href="css/home/bootstrap.min.css" rel="stylesheet">
<link href="css/home//mdb.min.css" rel="stylesheet">

  • Simple and practical answer, also worked for me in Angular 8 with Node.js

Browser other questions tagged javascript css html5 node.js

You are not signed in. Login or sign up in order to post.