无法在设计登录页面中显示引导样式表
Posted
技术标签:
【中文标题】无法在设计登录页面中显示引导样式表【英文标题】：Cannot display bootstrap style sheets in Devise Sign in pages 【发布时间】：2021-08-03 20:19:01 【问题描述】：我正在使用模板登录页面来构建我的应用程序。目录内包含我在application.html.erb 文件中引用的所有css 文件和样式表。为我的应用程序的配置文件和身份验证组件连接设计时出现问题，我们发现依赖的 css 文件返回错误：GET http://127.0.0.1:3001/users/landing%20page%20template/vendor/simple-line-icons/css/simple-line-icons.css net::ERR_ABORTED 404 (Not Found)
我的问题是如何在一个页面上加载所有样式表，即页眉、页脚等，然后尝试呈现相同的标签会产生这些 GET 错误？ 帮助表示赞赏。 下面是相关代码sn-ps..
如果需要任何其他代码组件，请告诉我。谢谢。
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>JobFinder</title>
<%= csrf_meta_tags %>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="landing page template/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="landing page template/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="landing page template/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="landing page template/css/landing-page.min.css" rel="stylesheet">
</head>
<body>
<main class='<%= controller.controller_name %>'>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= render 'layouts/navbar' %>
<%= yield %>
<footer>
<!-- Bootstrap core javascript -->
<script src="landing page template/vendor/jquery/jquery.min.js"></script>
<script src="landing page template/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</footer>
</main>
</body>
</html>
设计表单代码：
<h2>Edit Profile
<% resource_name.to_s.humanize %></h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: method: :put ) do |f| %>
<div class="field form-group">
<%= f.label :email %><br/>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div class="field form-group">
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br/>
<%= f.password_field :password, autocomplete: "new-password" %>
<% if @minimum_password_length %>
<br/>
<em><%= @minimum_password_length %> characters minimum</em>
<% end %>
</div>
<div class="field form-group">
<%= f.label :password_confirmation %><br/>
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="field form-group">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br/>
<%= f.password_field :current_password, autocomplete: "current-password" %>
</div>
<div class="actions">
<%= f.submit "Update", class: 'btn btn-secondary' %>
</div>
<% end %>
<br/>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Cancel my account</h5>
<h6 class="card-subtitle mb-2 text-muted">Unhappy?</h6>
<p>
<%= button_to "Cancel my account", registration_path(resource_name), data: confirm: "Are you sure?" , method: :delete,
class: 'btn btn-danger' %>
</p>
<%= link_to "Back", :back %>
</div>
</div>
【问题讨论】：
【参考方案1】：为什么你的目录中有空格？删除它们并用下划线或破折号替换它
【讨论】：
以上是关于无法在设计登录页面中显示引导样式表的主要内容，如果未能解决你的问题，请参考以下文章