链轮以随机顺序加载 sass 推特 bootstrap

Question

在 Twitter bootstrap 上强制执行 sass 表单的特定顺序的最佳方法是什么？原因是...

sass 和 bootstrap 的 Sprockets 随机加载让我搞砸了 css 某些 bootstrap 设置为背景颜色的属性。

我想先加载 Twitter bootstrap，这样我就可以超越它设置的任何内容。

Answer 1

好的，此方法将根据导入文件的顺序加载，并且还将仅根据为页面提供服务的控制器加载适当的文件。要做到这一点需要做几件事，所以我将分解它们。

首先：您要删除 stylesheets/application.scss 和 javascripts/application.js 文件中的 require_tree 语句。

然后，在您的 layouts/application.html.erb 文件中，您将添加以下行以加载相应控制器的样式表和 javascript：

在 head 标签内添加：

<%=stylesheet_link_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.css"] %>

在您的 <%= yield %> 语句后最底部的 body 标记内，您将添加以下内容：

#The following line will load the controller related js files in your app/assets/javascripts folder as they're viewed.
<%= javascript_include_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.js"] %>

#The following line will yield to any javascript wrapped in a `<%=content_for :javascript do %>` tag that you'll use at the bottom of the corresponding view page.  This is useful when you run some page related js and don't want it running application wide
<%=yield :javascript %>

现在，在您的 config/initializers/assets.rb 文件中，您需要将任何 js 或 scss 文件添加到预编译数组中：

Rails.application.config.assets.precompile += %w( users.css users.js more_controller_named_files_or_anything_needing_loading_here )

现在，在您可能具有页面特定 js 运行的任何视图页面上，例如数据表，您可以将以下内容放在相应视图的底部：

<%=content_for :javascript do %> <!--This gets called in our layouts/application page! -->
      <script type='text/javascript'>
          $(document).ready(function() {
             whatever code here
          });
      </script>
   <% end %>

那么站点范围内的任何 css 或 js 库都应该进入您的 stylesheets/application.scss 和 javascripts/application.js 文件，如下所示：

stylesheets/application.scss
    @import "bootstrap-sprockets";
    //blah blah blah

javascripts/application.js
   //=require jquery
   // require whatever other files

Then you can use these import and require directives inside the controller named stylesheets and javascripts for more control on what library is loaded and when.  The asset pipeline can be intimidating at first but definitely worth while once you're familiar with it.

链轮以随机顺序加载 sass 推特 bootstrap

sprockets loads sass in random order with twitter bootstrap

css

ruby-on-rails

sass

sprockets

twitter-bootstrap