為什么我的CSS在我的Rails應用程序上不起作用？
[英]Why doesn't my CSS work on my Rails app?
問題描述
我是Rails的新手，盡管正在尋找答案，但一直在努力解決此問題。
我已經創建了一個新應用，並且試圖將Theme Forest Bootstrap模板遷移到該應用中。 我以為這很簡單，但到目前為止我失敗了。
這些文件具有以下代碼：
應用程序/視圖/布局/ 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>
應用程序/資產/樣式表/ 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
*/
應用程序/資產/ 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
由於某些原因，這無法加載我認為的bootstrap-min.js。
如果刪除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">
我有種感覺，因為我不知道該怎么做，但請記住我是新手，我必須從某個地方開始！
3 個解決方案
解決方案1
0 2015-01-31 15:07:16
您需要將bootstrap.min.css等各種樣式表從assets/bootstrap.min.css到“ assets / stylesheets / bootsrap.min.css”。
資產/樣式表文件夾中的所有內容都將由於以下標記而被資產管道拾取： *= require_tree . 並包含在<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>中。 Rails資產管道將連接並縮小所有資產。 除了默認值外，通常無需在application.css中使用require。
在此處閱讀有關Rails資產管道的更多信息： http : //guides.rubyonrails.org/asset_pipeline.html
另外，我建議使用引導程序作為寶石，而不是手動包括資產。 在此處閱讀更多信息： https : //github.com/twbs/bootstrap-sass
解決方案2
0 已采納 2015-01-31 17:15:11
我已經排序了！
我認為CSS中肯定有沖突。 一世
*= require_tree .
現在工作正常。 我還發現JS存在問題，我也將其刪除。
不知道這是否明智，但我歡迎任何建設性意見。
解決方案3
0 2016-02-05 17:43:17
我已經看到此錯誤。 這是execjs的編碼問題。 我在該線程上找到了解決方案（ Windows上的ExecJS :: RuntimeError試圖遵循rubytutorial ）我選擇了該選項-更加令人滿意！
Ruby on Rails：為什么我的刪除鏈接不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.