En este código, invoco un archivo html en app.js, el estilo css no se aplica al html, pero cuando abro la ruta html sola sin app.js, se aplica el estilo, aquí está el código:
const express = require("express"); const bodyParser = require("body-parser"); const ejs = require("ejs"); const mongoose = require('mongoose'); const app = express(); app.set('view engine', 'ejs'); app.use(bodyParser.urlencoded({ extended: true })); app.use(express.static("public")); mongoose.connect("mongodb://localhost:27017/aqeldb1", {useNewUrlParser: true}); app.route("/order") .get(function(req, res){ res.sendFile(__dirname + "/ordernow.html"); }); app.listen(3000, function() { console.log("Server started on port 3000"); });
Debe establecer como estático el directorio donde se encuentran los archivos .css
o /index.html
no podrá acceder a ellos cuando se cargan a través del servidor express.
app.use(express.static("directory/that/you/want/to/be/publicly/accessible")); <-- here you keep .css, and clientside .js files.
También puede colocar los archivos .css
en la carpeta pública si no desea agregar otro directorio estático. Un buen enfoque es hacer que todos los directorios que contienen los archivos de view
( .html, .css, .js ) sean estáticos.
Úselo en su archivo principal .js:
app.use('/css',express.static(__dirname +'/css'));
use en su archivo .html principal:
<link rel="stylesheet" type="text/css" href="css/style.css" />
Mantenga los archivos .css en la carpeta pública
Intente aplicar app.use(express.static('public'));