Файл CSS не загружается даже после добавления промежуточного программного обеспечения - PullRequest
Новая
       23

Файл CSS не загружается даже после добавления промежуточного программного обеспечения

0 голосов
/ 20 июня 2019

CSS-файлы не загружаются, и при проверке элемента (F12) и при переходе в сети мой CSS-файл не отображается.Я добавил промежуточное программное обеспечение 

app.use(express.static(path.join(__dirname, '/public')));

, а также требуемый путь над ним.

Я добавил промежуточное программное обеспечение, потребовал его и npm установил его тоже.

Структура моей папки

-app.js

-package.json

-package-lock.json

-node_modules

-public

    -stylesheets

        -main.css

-views

    -index.ejs

    -partials

        -header.ejs

        -footer.ejs

Мой файл Header.ejs содержит это, а мое тело содержит текст.

<link href="/stylesheets/main.css"> Мой файл app.js 

var express = require('express');
var request = require('request');
var ejs = require('ejs');
var path = require('path');
var app = express();
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, '/public')));

и мой cssфайл меняет цвет backgorund, файл index.ejs вызывает соответственно верхний и нижний колонтитулы 

<% include partials/header%>

Мой код CSS 

body{
background-color: purple;
text-align: center;
}

Моя консоль Chrome не показывает ошибок, и все же я не могузагрузить мой CSS.Заранее спасибо за ваш вклад.

Ответы [ 3 ]

0 голосов
/ 21 июня 2019

Проблема с тегом ссылки.Вы должны указать атрибуты rel , type и href в теге ссылки.

<link rel = "stylesheet" type = "text/css" href = "/stylesheets/main.css" />
0 голосов
/ 22 июня 2019

Дело в том, что вы запрашиваете файл таблицы стилей с указанием URL-адреса, который будет заполнен навигатором с текущим корневым путем. Например, это ваша ссылка ниже. 

<link rel="stylesheet" href = "/stylesheets/main.css" />

Это код вашего сервера NodeJS. 

app.get("/your/root/path", (req, res)=>{

})

Ваша ссылка href будет соответствовать /your/root/path/stylesheets/main.css Я думаю, что это будет вашей проблемой. Если это так, то для исправления установите <base> url для статических файлов или не позволяйте пути к вашим маршрутам, которые возвращают представления, иметь форму /your/root/path, а вместо этого /your-root-path

0 голосов
/ 20 июня 2019

Вы используете неверный тег ссылки.Вам нужно предоставить атрибуты rel и type, чтобы он загружал CSS и правильно его анализировал.Ознакомьтесь с документацией по тегу link, чтобы узнать больше

...