Загрузка отдельной таблицы стилей CSS (heroku nodejs)

Я не могу загрузить отдельную таблицу стилей CSS для веб-приложения heroku, как локально, так и на сервере heroku. Недавно я перешел из движка Google и так, как я загрузил таблицы стилей, работал отлично. Что я здесь делаю неправильно? Любая помощь будет принята с благодарностью! Вот мой код:Загрузка отдельной таблицы стилей CSS (heroku nodejs)

/app/server.js

var express = require("express"); 
var app = express(); 
app.use(express.logger()); 

var fs = require("fs"); 
var buf = fs.readFileSync("html/index.html"); 
var index = buf.toString(); 

app.get('/', function(request, response) { 
    response.send(index); 
}); 

var port = process.env.PORT || 5000; 
app.listen(port, function() { 
    console.log("Listening on " + port); 
});

/app/html/index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Starters Singapore | Social Group Dating</title> 
    <link rel="stylesheet" type="text/css" href="../css/index.css"> 
    </head> 

    <body> 
    <div id="testdiv">This is a test</div> 
    </body> 

</html>

/app/css/index.css

body{ 
    margin:0; 
    text-align: left; 
    background-color: #666666; 
} 

#testdiv{ 
    width: 50%; 
    height: 50%; 
    background-color: #00a1ec; 
}

источник

2013-07-07 mathmonkey

Не могли бы вы объяснить более подробно вашу проблему? Я не могу это получить. – gen

Вы используете относительный путь к файлу css. Этот путь относится к корню сервера, а не к файлу html. У меня нет опыта работы с Heroku NodeJS, но я думаю, что путь должен быть

/css/index.css

источник

2013-08-20 20:34:51

развернуть приложения на Heroku, а также. Я бы предложил использовать ejs или jade для рендеринга вашего html. Я предпочитаю ejs. Поскольку вы используете Express, я также создаю «общедоступный» каталог, используя this reference. enter image description here

Тогда в ваших layout.ejs (для экспресс-2.xx или экспресс 3.xx с использованием EJs-местных НПМ)

<!DOCTYPE html> 
<html> 
    <head> 
    <title>The Title</title> 
    <% stylesheet('/css/index.css') %> 
    <%- stylesheets%> 
    </head> 
    <body> 
    </body> 
</html>

Вы также имели бы index.ejs где вы называем это layout.ejs

<%- layout('layout') %>

Я хотел бы также предложить со ссылкой на this при использовании макетов с EJS. Изучение ejs или jade может сначала слегка раздражать, но отлично работает, как только вы это понимаете лучше. Надеюсь, это не слишком большой ответ.

источник

2013-08-20 21:20:05 Wehlematt

Вот что помогло мне:

var express = require('express'); 
var app = express(); 
var server = require('http').createServer(app); 

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

Если предположить, что у вас есть все, что помещается в корневой папке. Например, у меня есть файлы css, расположенные внутри имени папки css (который находится внутри корневой папки *). Затем я могу использовать ./css/bootstrap.min.css внутри моего файла index.html (который также находится в корневой папке как сосед в папке css).

* Корневая папка здесь относится к корневой папке проекта.

источник

2018-01-09 20:01:05 PallavBakshi

Загрузка отдельной таблицы стилей CSS (heroku nodejs)

ответ

Смежные вопросы