为什么我的CSS在我的Rails应用程序上不起作用？
[英]Why doesn't my CSS work on my Rails app?
问题描述
I am new to Rails and have been struggling to fix this issue despite searching for an answer. 
我是Rails的新手，尽管正在寻找答案，但一直在努力解决此问题。
I have created a new app and I am trying to migrate a Theme Forest Bootstrap template into the app. 我已经创建了一个新应用，并且试图将Theme Forest Bootstrap模板迁移到该应用中。 I thought it would be quite simple but I have failed so far. 我以为这很简单，但到目前为止我失败了。
The files have the following code: 这些文件具有以下代码：
app/views/layouts/application.html.erb 应用程序/视图/布局/ application.html.erb
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Site</title>
<!-- Fonts -->
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,700,900,700italic,500italic'>
<!-- Stylesheets -->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/fontello-ie7.css">
<![endif]-->
<%= csrf_meta_tags %>
</head>
app/assets/stylesheets/application.css 应用程序/资产/样式表/ application.css
*= require_self
*= require_tree .
*= require bootstrap.min
*= require perfect-scrollbar
*= require style
*= require flexslider
*= require fontello
*= require animation
*= require owl.carousel
*= require owl.theme
*= require chosen
*/
app/assets/javascripts/application.js 应用程序/资产/ JavaScript的/ application.js中
//= require_tree .
//= require modernizr.min
//= require jquery-1.11.0.min
//= require jquery-ui.min
//= require jquery.raty.min
//= require perfect-scrollbar.min
//= require zoomsl-3.0.min
//= require jquery.fancybox.pack
//= require jquery.themepunch.plugins.min
//= require jquery.themepunch.revolution.min
//= require flexslider.min
//= require jquery.iosslider.min
//= require jquery.nouislider.min
//= require owl.carousel.min
//= require chosen.jquery.min
//= require bootstrap.min
//= require turbolinks
For some reason this fails to load what I think is bootstrap-min.js. 由于某些原因，这无法加载我认为的bootstrap-min.js。
I can get the page to work correctly if I remove the stylesheet_link_tag tag and replace the css links in the application.html.erb file to reflect the following: 如果删除stylesheet_link_tag标记并替换application.html.erb文件中的css链接以反映以下内容，则可使页面正常工作：
<link rel="stylesheet" href="assets/bootstrap.min.css">
<link rel="stylesheet" href="assets/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/fontello.css">
<link rel="stylesheet" href="assets/animation.css">
<link rel="stylesheet" href="assets/owl.carousel.css">
<link rel="stylesheet" href="assets/owl.theme.css">
<link rel="stylesheet" href="assets/chosen.css">
I have a feeling I will be slated for not knowing but remember I am new to this and I've got to start somewhere! 我有种感觉，因为我不知道该怎么做，但请记住我是新手，我必须从某个地方开始！
3 个解决方案
解决方案1
0 2015-01-31 15:07:16
You need to move your various stylesheets like bootstrap.min.css from assets/bootstrap.min.css to 'assets/stylesheets/bootsrap.min.css'. 您需要将bootstrap.min.css等各种样式表从assets/bootstrap.min.css到“ assets / stylesheets / bootsrap.min.css”。
Anything in the assets/stylesheets folder will get picked up by the asset pipeline due to this tag: *= require_tree . 资产/样式表文件夹中的所有内容都将由于以下标记而被资产管道拾取： *= require_tree . and included by <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> in your app. 并包含在<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>中。 The Rails Asset Pipeline will concatenate and minify all your assets. Rails资产管道将连接并缩小所有资产。 You typically won't have to use require in your application.css other than the defaults. 除了默认值外，通常无需在application.css中使用require。
Read more about the Rails Asset Pipeline here: http://guides.rubyonrails.org/asset_pipeline.html 在此处阅读有关Rails资产管道的更多信息： http : //guides.rubyonrails.org/asset_pipeline.html
Also I would suggest using bootstrap as a gem instead of manually including the assets. 另外，我建议使用引导程序作为宝石，而不是手动包括资产。 Read more here: https://github.com/twbs/bootstrap-sass 在此处阅读更多信息： https : //github.com/twbs/bootstrap-sass
解决方案2
0 已采纳 2015-01-31 17:15:11
I have sorted it! 我已经排序了！
I think there must have been a conflict in the CSS. 我认为CSS中肯定有冲突。 I 一世
*= require_tree .
and it is working fine now. 现在工作正常。 I also found there was an issue with the JS and I removed it there too. 我还发现JS存在问题，我也将其删除。
Not sure if this would be advisable but I welcome any constructive comments. 不知道这是否明智，但我欢迎任何建设性意见。
解决方案3
0 2016-02-05 17:43:17
I have seen this error. 我已经看到此错误。 It is an encoding issue with execjs. 这是execjs的编码问题。 I found the solution on this thread ( ExecJS::RuntimeError on Windows trying to follow rubytutorial ) I opted for the option - much more satisfying! 我在该线程上找到了解决方案（ Windows上的ExecJS :: RuntimeError试图遵循rubytutorial ）我选择了该选项-更加令人满意！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.