链轮使用 twitter 引导程序以随机​​顺序加载 sass [英] sprockets loads sass in random order with twitter bootstrap

问题描述

使用 twitter bootstrap 强制执行特定顺序的 sass 表的最佳方法是什么?原因是...

What is the best way to enforce a certain order of sass sheets with twitter bootstrap? Reason is...

链轮随机加载 sass 和引导程序让我在使用引导程序设置为背景颜色的某些 css 属性时搞砸了.

Sprockets random loading of sass and bootstrap is messing up me over riding certain css properties that bootstrap set like background color.

我希望首先加载 twitter 引导程序，以便我可以超越它设置的任何内容.

I want twitter bootstrap loaded first so I can over ride anything it sets.

推荐答案

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

Ok this method will load based on the order of imported files and will also only load the appropriate files based on the controller serving the pages. There are several things required to do this so I'll break them down.

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

First: Your going to remove the require_tree statement in your stylesheets/application.scss and your javascripts/application.js files.

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

Then, in your layouts/application.html.erb file you're going to add the following lines that will load the corresponding controller's stylesheets and javascripts:

在 head 标签内添加:

Inside the head tag add:

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

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

Inside the body tag at the very bottom after your <%= yield %> statement you're going to add the following:

#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 文件添加到预编译数组:

Now in your config/initializers/assets.rb file you need to add any js or scss files to the precompilation array:

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

现在，在您可能需要运行特定于页面的 js 的任何视图页面上，例如 DataTable，您可以将以下内容放在相应视图的底部:

Now on any view pages where you may have page specific js to run such as a DataTable you'd put the following at the bottom of your corresponding view:

<%=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 文件中:

Then any css or js libraries that are site wide should go into your stylesheets/application.scss and javascripts/application.js files as follows:

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.

这篇关于链轮使用 twitter 引导程序以随机​​顺序加载 sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！