Question

在我的Rails应用中。这就是我的custom.css.scss文件的样子：

@import "bootstrap";

/* mixins, variables, etc. */

$grayMediumLight: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}



/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  padding-right: 40px;
  padding-left: 40px;
  border-top: 1px solid $grayMediumLight;
  color: $grayLight;
  a {
    color: $gray;
    &:hover {
      color: $grayDarker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 10px;
    }
  }
}

我在这里有一个_footer.html.erb部分：

<footer class="footer">
  <small>
    <a href="https://twitter.com/siaw23">Twitter:</a>
    Siaw23
  </small>
  <nav>
    <ul>
      <li><a href="https://music.twitter.com/">Music :D</a></li>
    </ul>
  </nav>
</footer>

我的application.html.erb是这样的：

<!DOCTYPE html>
<html>
<head>
  <title>Kalendar</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>

我的Gemfile中有引导程序，我运行bundle install但css效果无法正常工作。有什么理由吗？可以在这里使用一些帮助。

这就是我的网页目前的样子：

enter image description here

这是我的application.css

/*
*= require_tree .
*= require bootstrap

*/

Answer 1

假设你安装了bootstrap gem或者在资产或供应商文件夹中添加了bootstrap css文件，你仍然需要知道编译bootstrap资产。

在Application.css中，在*= require_tree.之前添加require行：

*= require bootstrap

您可以对其他样式表执行相同操作，例如* = require filename（省略文件扩展名，rails会检测到它）

javascript也是如此，但语法略有不同

的application.js

//= require bootstrap

Answer 2

看起来您正在尝试在需要之前加载引导程序。

使用rails中的资产管道，加载顺序非常重要，因为文件已打包并连接。

尝试在需要引导程序后放置require tree .，这有助于确保内容可用且不会被覆盖。

在进行这些更改时，偶尔也需要重新启动开发服务器。

RoR SCSS / CSS无法使用

2 个答案: