Rails页资产样式表未加载
Rails页资产样式表未加载
提问于 2014-06-03 23:18:43
我最近完成了一个月的Rails教程，并希望开始定制我的设计。我从WrapBootstrap上购买了一个主题，并完成了以下工作：
- 将Javascript/CSS添加到Vendor文件夹
- 包括供应商文件夹中所需的所有图像
- 更新清单文件，包括任何新的javascript或样式表
由于任何原因，当我试图访问除索引页之外的任何页面时，引导程序似乎没有正确加载。
例如:我的用户/注册页面，我自定义的Devise不再继承以前使用的任何样式。我想要完成的是让索引页加载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文件中吗？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-04 03:54:46
您应该将css和javascript文件分别添加到assests/样式表和assests/javascript中。并将这些内容添加到视图/ layout /application.html.erb或正在使用的任何其他布局的头上：
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>我希望这会奏效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24026545
复制相关文章
相似问题
腾讯云开发者
