Question

我已在app/assets/stylesheets中创建了一个css文件home_page.css.scss，并将标记<% stylesheet_link_tag 'home_page.css' %>添加到名为index.html.erb的html.erb文件中。

当我运行rails服务器时（重新启动以便CSS可以编译）我可以在localhost:3000看到我的页面的HTML内容，但CSS内容无处可寻。

如果有帮助的话，可以在我的GitHub上查看我的rails应用程序的完整源代码：

https://github.com/adam-wanninger/tweet_down

我做错了什么？

以下是index.html.erb：

<!DOCTYPE html>
<html>

<head>
  <% stylesheet_link_tag 'home_page.css'  %>
  <title>Tweet Down</title>
</head>

<body>

<h1>Tweet Down</h1>

<p>Tweet Down is a Ruby on Rails app built by me, Adam Wanninger. I built Tweet Down to be a basic (but stylish) Twitter feed for next years presidential candidates.</p>

<div>
  <p id="dem_drop_down">Democratic Party Candidates<br>
    <select name="democrat_menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
      <option selected="selected">Bernie Sanders</option>
      <option value="year/1">Hillary Clinton</option>
      <option value="year/2">Michael Jackson</option>
    </select>
  </p>
</div>

<div>
  <p id="rep_drop_down">Republican Party Candidates<br>
    <select name="republican_menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
      <option selected="selected">Ted Cruz</option>
      <option value="URL">Jeb Bush</option>
      <option value="URL">Jon Stamos</option>
    </select>
  </p>
</div>




</form>

</body>

</html>

Answer 1

<% stylesheet_link_tag 'home_page.css'  %>

在开头缺少=。

尝试

<%= stylesheet_link_tag 'home_page.css'  %>

Answer 2

index.html.erb的内容实际上是application.html.erb的正文。因此，您可能只希望在index.html.erb文件中仅包含以<h1>开头的index.html.erb部分。

修改

因此，在/app/views/layouts文件夹中有application.html.erb。 application.html.erb是网站的默认布局。我不知道你为什么这样做，但你改变了

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

到

<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>

通过执行此操作，您可以覆盖/app/assets/stylesheets中自动包含CSS文件。

如果您将其更改回来，则home_page.css应自动包含在资产中。

现在，如果你查看application.html.erb的内容，你会发现它看起来像这样：

<!DOCTYPE html> <html> <head> <title>TweetDown</title> <%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'default', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>

其中<%= yield %>表示输出index.html.erb的全部内容的位置。因此，对于您拥有的index.html.erb，您将拥有不正确的（非验证）HTML。您应该将index.html.erb更改为只需要您想要的HTML部分。在您更改样式表和javascript声明中放置default而不是application的位置后，它仍应有效。

CSS没有显示在视图中

2 个答案: