title: How do I organize SCSS in rails?
body: <p>I just bootstrapped a new rails project and I was trying to reference from an open sourced rails project on how they architect their app.</p>
  
  <blockquote>
    <p><a href="https://github.com/assemblymade/meta" rel="nofollow">Link to the open sourced project</a></p>
  </blockquote>
  
  <p>I noticed they have multiple layouts e.g. admin, application, home ..etc. And each may load in different stylesheets via <code>stylesheet_link_tag</code>. </p>
  
  <p>For example in <code>focus_home.html.erb</code>:</p>
  
  <pre><code>&lt;!-- Load styles --&gt;
  &lt;%= stylesheet_link_tag 'focus_home' %&gt;
  &lt;%= stylesheet_link_tag 'app/components/modal' %&gt;
  </code></pre>
  
  <p>And in their <code>app/assets/stylesheets</code> directory, they have <code>focus_home.scss</code></p>
  
  <p>I try to follow their architecture where I have multiple css files and I call different stylesheets with different layout.</p>
  
  <p>I created my <code>home.scss</code> to be used by <code>home.html.slim</code></p>
  
  <p>when I started my rails server and try to load the <code>home</code> page, the following error occurs</p>
  
  <pre><code>Asset filtered out and will not be served: add
  `Rails.application.config.assets.precompile += %w( home.css )` to
  `config/initializers/assets.rb` and restart your server
  </code></pre>
  
  <p>Basically it asked me to tell rails to precompile <code>home.scss</code>. However, when I browse through the open source project's code base. It doesn't seem to have this line of code. The precompilation just seem to happen like magic. </p>
  
  <p>So I am wondering what I am missing ?</p>
  
  <p>==============</p>
  
  <p>Edit: Further explain the case</p>
  
  <p>In their project they <em>DO NOT</em> have an <code>application.css</code> file like normal rails project.</p>
  
  <pre><code>/*  * This is a manifest file that'll be compiled into application.css, which will include all the files  * listed below.  * 
  * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,  * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.  *  * You're free to add application-wide styles to this file and they'll appear at the bottom of the  * compiled file so the styles you add here take precedence over styles defined in any styles  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new  * file per style scope.  *  *= require_tree .  *= require_self  */
  </code></pre>
  
  <p>Instead, in their <code>application.scss</code>, it goes like</p>
  
  <pre><code>@charset "utf-8";
  
  @import "vars/base";
  @import "constants";
  
  // Libraries
  @import 'bootstrap';
  
  @import 'app/mixins/*';
  
  @import 'basscss';
  
  @import '_deprecated/basspluss';
  @import '_deprecated/utility';
  @import '_deprecated/nocss_vars';
  @import '_deprecated/nocss';
  @import '_deprecated/nocss_mq';
  
  @import "app/main";
  
  @import "base/*";
  @import "utilities/*";
  @import "app/components/*";
  @import "components/*";
  @import "app/slop";
  
  @import 'libs/owl.carousel';
  @import 'libs/owl.transitions';
  @import 'libs/owl.theme';
  
  @import 'c3/c3'
  </code></pre>
  
  <p>So I wonder how they actually do their precompilation?? </p>