为什么我的 CSS 不能在我的 Rails 应用程序上运行？

Question

我是 Rails 的新手，尽管在寻找答案，但我一直在努力解决这个问题。

我创建了一个新应用程序，我正在尝试将主题森林 Bootstrap 模板迁移到该应用程序中。我以为这会很简单，但到目前为止我还是失败了。

文件具有以下代码：

app/views/layouts/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

 *= 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

//= 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 标记并替换 应用程序中的 css 链接，我可以使页面正常工作。html.erb 文件以反映以下内容：

<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">

我有一种感觉，我会因为不知道而被预定，但请记住我是新手，我必须从某个地方开始！

Answer 1

您需要将 bootstrap.min.css 等各种样式表从 assets/bootstrap.min.css 移动到 'assets/stylesheets/bootsrap.min.css'。

由于此标记，assets/stylesheets 文件夹中的任何内容都将被资产管道拾取：*= require_tree . 并被 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 包含在您的应用程序中。 Rails Asset Pipeline 将连接并缩小您的所有资产。除了默认值之外，您通常不必在 application.css 中使用 require 。

在此处阅读有关 Rails 资产管道的更多信息：http://guides.rubyonrails.org/asset_pipeline.html

此外，我建议使用 bootstrap 作为 gem 而不是手动包含资产。在这里阅读更多：https://github.com/twbs/bootstrap-sass

Answer 2

我整理好了！

我认为 CSS 中一定存在冲突。我

 *= require_tree .

现在一切正常。我还发现 JS 有问题，我也在那里删除了它。

不确定这是否可取，但我欢迎任何建设性意见。

Answer 3

我看到了这个错误。这是 execjs 的编码问题。我在此线程上找到了解决方案 (ExecJS::RuntimeError on Windows trying to follow rubytutorial) 我选择了这个选项 - 更令人满意！

为什么我的 CSS 不能在我的 Rails 应用程序上运行？

Why doesn't my CSS work on my Rails app?

html

javascript

css

ruby-on-rails

asset-pipeline