#javascript #html #css #node.js #express
Вопрос:
Я понятия не имею, как точно это объяснить, но по какой-то причине CSS не работает с определенными маршрутами с node.js amp; экспресс.
Например, CSS отлично работает для маршрута «/канал», но совсем не работает с «/пользователи/:имя пользователя», даже если HTML — файл ссылается на тот же файл CSS.
Я заметил, что это происходит не в первый раз, и я понятия не имею, почему это происходит. Если бы кто-нибудь мог объяснить мне / направить меня в правильном направлении относительно того, что я должен делать, это было бы очень признательно.
Вот лучший пример:
Маршрут индекса (CSS работает для этого маршрута)
// @ROUTE: Home Route
// @DESCRIPTION: Renders the homepage
server.get('/', (req, res)=> {
filesDB.find({}).sort({createdAt: '-1'}).exec((err, data) => {
if(err) {
throw err
} else {
res.render('Home.ejs', {
pageTitle: "Feed :: ImgHub",
curSession: req.session,
images: data
})
}
})
})
/пользователи/:маршрут имени пользователя (CSS не работает для этого маршрута)
// @ROUTE: User Route
// @DESCRIPTION: Renders all the posts that were uploaded by the selected user
server.get('/user/:username', (req, res)=> {
const username = req.params.username
filesDB.find({'uploader': username}).sort({createdAt: '-1'}).exec((err, data)=> {
if(err) {
throw err
} else {
res.render('User.ejs', {
pageTitle: `${username} :: ImgHub`,
curSession: req.session,
images: data
})
}
})
})
Экспресс-статический файл
server.use(express.static(__dirname '/CSS'))
К вашему сведению: Я не получаю ошибок в журнале консоли на веб-сайте.
Комментарии:
1. Поможет ли это следовать этому соглашению в app.use вместо этого?
app.use(express.static(path.join(__dirname, 'css')));
Вторым аргументом в этой функции должен быть объект, и я не уверен, что символ и строка папки css работают как таковые.2. Можете ли вы показать, где и как вы включаете свои CSS-файлы в HTML? Учитывая
/user/:username
каталог, ваш CSS-файл может быть/user/CSS/style.css
, например, попытается быть включен из него. Проверьте консоль вашего браузера, чтобы точно узнать, по какому маршруту ваш CSS-файл пытается быть включен.
Ответ №1:
Я думаю, что проблема в вашем HTML
Вы добавляете свой CSS-файл вот так:
<link rel="stylesheet" href="styles.css">
И когда ваш URL-адрес выглядит примерно так /feed
, это было бы нормально, но по таким ссылкам, как /something/here
у вас, ваш CSS будет отображаться как /something/styles.css
. Поэтому вам нужно быть конкретным и добавить /
в свою CSS-декларацию вот так:
<link rel="stylesheet" href="/styles.css">
Таким образом, поиск ваших стилей всегда будет осуществляться из корня, который /
Комментарии:
1. Я собирался написать то же самое, абсолютный маршрут должен сработать.