Среда Node.js Express: невозможно получить файл CSS

Я хочу получить доступ к своему.html с помощью localhost через node.js. Я использую экспресс-рамки для этого. Мой.html содержит немного CSS, но он не загружается с HTML-файлом.

Код:

var express = require('express');
var app = express();

app.use(express.static('public'));
app.engine('.html', require('ejs').renderFile);

app.get('/', function(req, res) {
    res.render('FrontPage.html');
});

app.listen(3000, function(){
    console.log("listening to 3000");
})

HTML:

<head>
    <link rel="stylesheet" type="text/css" href="./css/FrontPageCSS.css">
</head>



<body style="background-image:url(./img/bg.jpg)">

<div id="header">
        <a href="./frontPage.html"><img src="./img/Logo.png" height="5%" width="5%" alt="logo"></a>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="./script/FrontPageJS.js"></script>
</div>

<div id="buttonWrapper">
    <div id="first" class="first">
        This is my first button
    </div>

    <div id="second" class="second">
        This is my second button
    </div>
</div>

CSS:

div#header{
    text-align: center;
}
div#buttonWrapper{
    text-align: center;
}
div.madeBefore, div.madeNotBefore{
    border-radius: 25px;
    background: -webkit-linear-gradient(left top, #ffc300 , #ff8300);
    background: -o-linear-gradient(bottom right, #ffc300, #ff8300);
    background: -moz-linear-gradient(bottom right, #ffc300, #ff8300);
    background: linear-gradient(to bottom right, #ffc300 , #ff8300);
    width: 500px;
    height: 425px;
    margin-right: 50px;

    padding:50px;
    padding-top: 250px;
    padding-bottom: 0px;

    display: inline-block;
    vertical-align: top;

    text-shadow: 0 2px 3px rgba(255, 255, 255, 0.3), 0 -1px 2px rgba(0, 0,       0, 0.2);
    color: #B36103;
    font-size: 60px;
    text-align: center;
}
div.madeNotBefore{
    margin-right: 0px;
}
div.madeBefore:hover, div.madeNotBefore:hover{
    background: -webkit-linear-gradient(left top, #ff7600 , #e96c00);
    background: -o-linear-gradient(bottom right, #ff7600, #e96c00);
    background: -moz-linear-gradient(bottom right, #ff7600, #e96c00);
    background: linear-gradient(to bottom right, #ff7600 , #e96c00);
}

Как мне убедиться, что CSS отправляется вместе с.html?

Источник

3 ответа

Решение

Вы должны убедиться, что ваш CSS-контент находится в вашей общей папке. Например, если у вас есть папка css внутри общедоступной папки, а ваш файл css называется FrontPageCSS.css, то вы можете использовать его следующим образом

<link rel="stylesheet" type="text/css" href="/css/FrontPageCSS.css">

Вы можете предположить, что вы внутри публики для ссылок.

Источник

Добавь это:

var path = require('path');

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

создайте папку public, поместите CSS-файлы внутрь и в ваш HTML-файл:

<link rel="stylesheet" type="text/css" href="/FrontPageCSS.css" />
Источник

Прежде чем делать что-либо:

1) Убедитесь, что public/ находится в главной папке сервера. (Таким образом, где бы ни находился файл вашего сервера, public/ должен находиться в том же каталоге)

2)... убедитесь, что файл CSS действительно существует.

Затем используйте это, чтобы сделать каталог /public статическим:

app.use(express.static(__dirname + '/public'));

И в вашем файле установите это, чтобы получить свой CSS:

<link rel="stylesheet" type="text/css" href="/css/FrontPageCSS.css">
Источник
Другие вопросы по тегам