我最近完成了One Month Rails教程，并希望开始自定义我的设计。我继续购买了WrapBootstrap的主题并完成了以下内容：
无论出于何种原因，当我尝试访问索引页面之外的任何页面时，似乎没有正确加载引导程序。
例如：我自定义Devise View的用户/注册页面不再继承以前使用的任何样式。我想要完成的是让索引页面加载WrapBootstrap主题，然后加载我的其他页面，就像之前在搞乱任何东西之前一样。
据我所知，Heroku在处理资产管道方面有特殊的方法，硬编码资产并不是正确的做事方式。但是，我的样式在我的本地环境中也不起作用。
Application.css：
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require 'masonry/transitions'
*= require 'style.css'
*= require 'bootstrap.css'
*= require 'bootstrap.min.css'
*= require 'overwrite.css'
*= require 'animate.css'
*= require 'font-awesome.min.css'
*= require 'theme.css'
*= require 'simpletextrotator.css'
*= require 'default.css'
*= require_tree .
的application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.turbolinks
//= require turbolinks
//= require masonry/jquery.masonry
//= require jquery.js
//= require bootstrap.min.js
//= require custom.js
//= require wow.min.js
//= require mb.bgndGallery.js
//= require jquery.simple-text-rotator.min.js
//= require jquery.scrollTo.js
//= require jquery.nav.js
//= require modernizr.custom.js
//= require grid.js
//= require stellar.js
//= require_tree .
主页视图：
<!DOCTYPE html>
<html>
<head>
<title>Alstar - Bootstrap 3 one page template</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css -->
<link href="/assets//bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/assets/style.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- intro area -->
<div id="intro">
<div class="intro-text">
<div class="container">
<div class="col-md-12">
<div id="rotator">
<h1><span class="1strotate">We are changing the World.</span></h1>
<div class="line-spacer"></div>
<p><span class="2ndrotate">We connect brands with donation opportunities that empower their users.</span></p>
</div>
<div class="arrow-wrap"><a class="arrow-down scroll" href="#home-top"></a></div>
<br>
<br>
</div>
</div>
</div>
</div>
<!-- Services -->
<section id="services" class="home-section bg-white">
<div class="container">
<div class="row">
<div style="width: 100%;">
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Charity", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Donor", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><a class="btn-primary-red btn-lg" href="#about" role="button">I'm a Merchant</a></p></div>
<br style="clear: left;" />
</div>
<br>
<br>
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Services</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="carousel-service" class="service carousel slide">
<!-- slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Website Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/1.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Brand Identity</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/2.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Web & Mobile Apps</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/3.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="home-section bg-red">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<br>
<br>
<br>
<h2>About us</h2>
<div class="heading-line"></div>
<p>We’ve been building a beutiful checkout process that connects merchants with their loyal customers.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="box-team wow bounceInDown" data-wow-delay="0.1s">
<img src="/assets/team/1.jpg" alt="" class="img-circle img-responsive" />
<h4>Dominique Vroslav</h4>
<p>Art Director</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.3s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/2.jpg" alt="" class="img-circle img-responsive" />
<h4>Thomas Jeffersonn</h4>
<p>Web Designer</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.5s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/3.jpg" alt="" class="img-circle img-responsive" />
<h4>Nola Maurin</h4>
<p>Illustrator</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.7s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/4.jpg" alt="" class="img-circle img-responsive" />
<h4>Mira Ladovic</h4>
<p>Typographer</p>
</div>
</div>
</div>
</div>
</section>
<!-- Parallax 1 -->
<section id="parallax1" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="color-light">
<h2 class="wow bounceInDown" data-wow-delay="1s">Details are the key for perfection</h2>
<p class="lead wow bounceInUp" data-wow-delay="2s">We mix all detailed things together</p>
</div>
</div>
</div>
</div>
</section>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="portfolio" class="home-section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Works</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul id="og-grid" class="og-grid">
<li>
<a href="#" data-largesrc="/assets/works/1.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/1.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/2.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="/assets/works/thumbs/2.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/3.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="/assets/works/thumbs/3.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/4.jpg" data-title="Portfolio title" data-description="In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/4.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/5.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea">
<img src="assets/works/thumbs/5.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/6.jpg" data-title="Portfolio title" data-description="Id elit saepe pro. In atomorum constituam definitionem quo, at torquatos sadipscing eum, ut eum wisi meis mentitum. Probo feugiat ea duo. An usu platonem instructior, qui dolores inciderint ad. Te elit essent mea, vim ne atqui legimus invenire, ad dolor vitae sea.">
<img src="assets/works/thumbs/6.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/7.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei.">
<img src="assets/works/thumbs/7.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="asssets/works/8.jpg" data-title="Portfolio title" data-description="No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/8.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/9.jpg" data-title="Portfolio title" data-description="Lorem ipsum dolor sit amet, ex pri quod ferri fastidii. Mazim philosophia eum ad, facilisis laboramus te est. Eam magna fabellas ut. Ne vis diceret accumsan salutandi, pro in impedit accusamus dissentias, ut nonumy eloquentiam ius.">
<img src="assets/works/thumbs/9.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/10.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim.">
<img src="assets/works/thumbs/10.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/11.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="assets/works/thumbs/11.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/12.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/12.jpg" alt="img01"/>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Parallax 2 -->
<section id="parallax2" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="clients">
<li class="wow fadeInDown" data-wow-delay="0.3s"><a href="#"><img src="assets/clients/1.png" alt="" /></a></li>
<li class="wow fadeInDown" data-wow-delay="0.6s"><a href="#"><img src="assets/clients/2.png" alt="" /></a></li>
<li class="wow fadeInDown" data-wow-delay="0.9s"><a href="#"><img src="assets/clients/3.png" alt="" /></a></li>
<li class="wow fadeInDown" data-wow-delay="1.1s"><a href="#"><img src="assets/clients/4.png" alt="" /></a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="home-section bg-white">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Contact us</h2>
<div class="heading-line"></div>
<p>If you have any question or just want to say 'hello' to Alstar web studio please
fill out form below and we will be get in touch with you within 24 hours. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputSubject" placeholder="Subject">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<textarea name="message" class="form-control" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<button type="button" class="btn btn-theme btn-lg btn-block">Send message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer
================================================== -->
<footer id="contact" class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-sm-3 col-md-3">
<div class="footer-logo">
<h2>Prestige</h2>
<p>1024 Main Street, Vancouver BC<br>+1 (123) 456-7890</p>
<br>
<p class="muted">© 2013 Prestige Inc.</p>
<a href="#">Terms of Service</a>
<a href="#">Privacy</a>
</div>
</div>
<div class="col-sm-3 col-md-3">
<h3>Product</h3>
<ul class="list-unstyled">
<li><a href="#">Product for iOS</a></li>
<li><a href="#">Product for Android</a></li>
<li><a href="#">Product for Windows</a></li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Company</h3>
<ul class="list-unstyled">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Jobs <span class="label label-info">We're hiring!</span></a></li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Documentation</h3>
<ul class="list-unstyled">
<li><a href="#">Product Help</a></li>
<li><a href="#">Developer API</a></li>
<li><a href="#">Product Markdown</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<a class="icon" href="http://www.twitter.com/dparrelli" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="icon" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="icon" href="http://www.dribbble.com/dparrelli" target="_blank"><i class="fa fa-dribbble"></i></a>
<a class="icon" href="http://www.workingnomads.co" target="_blank"><i class="fa fa-globe"></i></a>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="/assets/jquery.js"></script>
<script src="/assets/bootstrap.min.js"></script>
<script src="/assets/wow.min.js"></script>
<script src="/assets/mb.bgndGallery.js"></script>
<script src="/assets/mb.bgndGallery.effects.js"></script>
<script src="/assets/jquery.simple-text-rotator.min.js"></script>
<script src="/assets/jquery.scrollTo.js"></script>
<script src="/assets/jquery.nav.js"></script>
<script src="/assets/modernizr.custom.js"></script>
<script src="/assets/grid.js"></script>
<script src="/assets/stellar.js"></script>
<script src="/assets/custom.js"></script>
</html>
有什么想法在这里混淆了吗？我应该将page.css放在page.css.scss下而不是application.css文件中吗？谢谢！
答案 0 :(得分：1)
你应该将你的css和javascript文件分别添加到assests / stylesheets和assests / javascripts。并将这些添加到您的views / layout / application.html.erb的头部或您正在使用的任何其他布局：
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
我希望这会奏效。