Почему CSS не работает на определенных маршрутах?

#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">

Таким образом, поиск ваших стилей всегда будет осуществляться из корня, который /