Почему CSS-файл приложения node.js загружается в мою среду IDE, а не на локальный хост?

Я делаю приложение nodejs с использованием LightTable, и CSS, кажется, загружается нормально, когда я указываю относительный путь к файлу в моем <link href=""> тег. Когда я бегу node index.jsТем не менее, сервер запускается, и страница загружается нормально, но я получаю консольную ошибку, и мой собственный 404 говорит, что файл CSS не может быть найден по указанному пути. Я пытался использовать Heroku Foreman Start как хорошо, но без игры в кости. Вот HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Home
        </title>
        <link href="../../styles/master.css" rel="stylesheet" type="text/css" />
    </head>
...

Вот моя древовидная структура каталогов:

.
├── Procfile
├── README.md
├── index.js
├── package.json
├── resources
│   └── images
│       └── tokyo.jpg
├── styles
│   └── master.css
└── views
    ├── get
    │   ├── home.html
    │   └── posts.html
    └── post
        └── new.html

РЕДАКТИРОВАТЬ: после нахождения ответа на вопрос, ниже информация стала актуальной. Я закомментировал новый код, который заставляет CSS и фоновое изображение загружаться по желанию.

Вот мой маршрут и код сервера. Я не использую Экспресс, специально:

    // routes
    var homeREGEX = new RegExp('^/?$');
    var newREGEX = new RegExp('^/posts/new/?$');
    var postsREGEX = new RegExp('^/posts/?$');
 // var cssREGEX = new RegExp('^/styles/master.css/?$');             <--| static resources also
 // var tokyoREGEX = new RegExp('^/resources/images/tokyo.jpg/?$');  <--| need routes. 

    // server
    var server = http.createServer(function(request, response){
      var pathname = url.parse(request.url).pathname;

      if (homeREGEX.test(pathname)) {
        renderHome(request, response);

      } else if (newREGEX.test(pathname)) {
        renderPostForm(request, response);
      } else if (postsREGEX.test(pathname)) {
        addNewPost(request, response);
   // } else if (cssREGEX.test(pathname)) {           <--| and they need to get
   //   sendCSS(request, response);                   <--| served individually as
   // } else if (tokyoREGEX.test(pathname)) {         <--| they are requested
   //   sendTokyo(request, response);
      } else {
        error404(request, response);
      }
    });
Источник

2 ответа

Решение

Какой URL вы используете в своем браузере при просмотре страницы? Я думаю, что это не содержит views/get часть, что означает, что вам не нужно ..\.. в вашей ссылке атрибуты href.

Кроме того, убедитесь, что вы на самом деле обслуживаете эти статические файлы (кажется, что нет). Если вы используете экспресс (с nodejs), например, вам нужно что-то вроде этого:

app.use(express.static('resources'));
app.use(express.static('style'));

Увидеть express.static документация

Источник

Может быть, вы можете попытаться указать точный путь вместо../../

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