Ik heb problemen om mijn browser de css te laten weergeven voor de app die ik aan het maken ben. Ik heb dezelfde vraag bekeken die door andere gebruikers is gesteld, maar heb geen van de antwoorden gevonden die in mijn situatie kunnen helpen. Als ik naar de pagina ga, wordt alleen “Hallo wereld” weergegeven zonder styling, ook al is de stylesheet gelinkt. Als ik de pagina inspecteer, krijg ik de foutmelding:
Kan bron niet laden: de server reageerde met de status 404 (Niet gevonden)
hier is de structuur van mijn applicatie
.
./public
/css
/main.css
./routes
/index.js
./views
/index.html
./server.js
server.js:
const express = require('express');
const app = express();
const port = process.env.PORT || 8080;
app.use(express.static(__dirname + '/public'));
const router = require('./routes/index.js');
app.use('/',router);
app.listen(port);
console.log('connected to port: ' + port);
index.html
<!DOCTYPE html>
<html>
<head>
<link href="../public/css/main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<p>Hello World!</p>
</body>
index.js
var express = require('express');
var path = require('path');
var router = express.Router();
module.exports = router;
router.get('/', function(req,res){
res.sendFile(path.join(__dirname,'../views/index.html'));
});
Antwoord 1, autoriteit 100%
je hebt de openbare map gedefinieerd in app root/public
app.use(express.static(__dirname + '/public'));
dus je moet gebruiken:
./css/main.css
Antwoord 2, autoriteit 91%
Gebruik de volgende code:-
../css/main.css
Opmerking: de “../” is een afkorting voor “De bevattende map” of “Een map omhoog”.
Als je de vorige map niet kent, is dit erg handig..