Cuando voy a localhost:3000 mi css funciona, pero cuando voy a localhost:3000/r/test mi css no funciona y recibo este mensaje:
Refused to apply style from 'http://localhost:3000/r/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Cada vez que tengo una ruta en la que la ruta es más larga que una ruta secundaria (no estoy seguro de si ese es el término correcto), mi css no funciona en absoluto. Por ejemplo, estas rutas funcionarían:
app.get('/', (req, res) => { ... ) app.get('/cats', (req, res) => { ... ) app.get('/dogs', (req, res) => { ... )Pero estos no funcionarán:
app.get('/cats/test', (req, res) => { ... ) app.get('/dogs/blah', (req, res) => { ... ) app.get('/hamster/foo', (req, res) => { ... )Mi archivo index.js:
const express = require('express'); const path = require('path'); const axios = require('axios'); const app = express(); app.set('view engine', 'ejs'); app.set('views', path.join(__dirname + '/views')); app.use(express.static(path.join(__dirname, 'public'))); app.get('/', (req, res) => { res.render('home'); }); app.get('/r/test', (req, res) => { res.render('test'); }); app.listen(3000, () => { console.log(`Listening at http://localhost:3000`); });Mi archivo test.ejs:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Test</title> </head> <body> <h1>Hi<h1> </body> </html>La estructura de mi proyecto es:
Project | +-- public | | | +--styles.css | +-- views | | | +-- home.ejs | +-- test.ejs | +--index.jsColoque el archivo CSS en el directorio público y agregue / en href del enlace como
<link rel="stylesheet" href="/styles.css"> Ahora solicitará a localhost:3000/style.css cada vez, sin importar la URL en la que se encuentre.
/ apuntar al directorio raíz
Sería mejor tener una ruta separada para servir los archivos estáticos
Cambiar la ruta estática a
app.use('/static',express.static(path.join(__dirname, 'public')));
y en el archivo ejs usarlo como
<link rel="stylesheet" href="/static/styles.css">