Почему моя внешняя ссылка CSS 404 при загрузке? - PullRequest
0 голосов
/ 06 ноября 2019

Я пробовал почти все комбинации относительных и абсолютных путей к файлу CSS. Я сделал это на JavaScript успешно, однако Sinatra и erb более уникальны. В приложении Sinatra у меня есть общедоступный каталог и каталог стилей, как обычно. В моем представлении dir у меня есть страница просмотра с внешним. Я пытался сделать это слишком много, возможно, это какая-то нюанска, которую мне не хватает. Как я могу получить файл erb view для загрузки внешней ссылки css?

У Sinatra нет таких вспомогательных методов, как rails. Я попытался переместить файл CSS рядом с файлом вида / различные комбинации относительных и абсолютных путей к файлу. Никто из них не работал. Этот код покажет 404 в журнале сервера (журнал дробовика).

вид erb

<html>
  <head> 
  <link href='../public/stylesheets/sent' type="text/css" rel="stylesheet" />

  <link rel="stylesheet" href="/sent.css" /> 
  </head>
  <body>

файл css

body {
    background-color: lightblue;
    color: #333;
    font-family: Sans-Serif;
    line-height: 18px;
}
h1 { 
    color: green;

}    
p { 
    color: orange;
}

В терминале при запуске дробовика я получаю Эти типы ошибок

127.0.0.1 - - [05/Nov/2019:23:24:47 -0800] "GET /sent.css HTTP/1.1" 404 509 0.0543
127.0.0.1 - - [05/Nov/2019:23:24:47 -0800] "GET /public/stylesheets/sent HTTP/1.1" 404 534 0.0617

Ответы [ 2 ]

0 голосов
/ 06 ноября 2019

Для будущих пользователей Sinatra, создающих пользовательские приложения MVC: я решил эту проблему, сохранив общую папку в корневом каталоге. Это соглашение в Sinatra MVC - хранить css / javascript / pics в общедоступном каталоге в корне программы. Я неправильно разместился в директории приложения. Как только я переместил его вверх и в директора по рудам, мой относительный путь сработал так, как будто я знаю, что делаю.

0 голосов
/ 06 ноября 2019

Тело не закрыто в вашем CSS.

body {
    background-color: lightblue;
    color: #333;
    font-family: Sans-Serif;
    line-height: 18px;
    }
h1 { 
    color: green;

   } 

p  { 
    color: orange;
  }
...