joaolucasl/README.md

## README.md

      
    Raw
  

              README.md
            
          
    I have the following configuration/SCSS files related to my Asset Pipeline.
The need is to have a custom CSS file for each controller, such as the home stylesheet below.
Inside those controller specific stylesheet, several variables, extends, and includes are used. If the SCSS file is imported inside application.scss, such as:
@import "home"
the variables work fine. But once I remove that declaration and declare the file inside the asset pipeline, the applications runs into an error:
Undefined variable: "$LatoFamily"
or similar. From what I understood, it is (maybe that's obvious) due to application.scss being already pre-compiled by that time (?).
What's a plausible approach for that case? Should I @import all the Bootstrap, Font Awesome as well as the custom SCSS files inside the home.scss and other controller-specific stylesheets?

  
## application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <%= stylesheet_link_tag "application", params[:controller], :media => "all" %>
    <%= javascript_include_tag "application", params[:controller] %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%= csrf_meta_tags %>
  </head>

  <body class='<%= controller.controller_name %>'>

    <%= yield %>

  </body>
</html>

## application.scss
/*
 *= require_self
 *= require bootstrap-datepicker3
 */

@import "reset";
@import "fonts";
@import "colours";


@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

@import "grid-assist";
@import "common-ui";

## assets.rb
# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )

%w( home admin).each do |controller|
  Rails.application.config.assets.precompile += ["#{controller}.js", "#{controller}.css"]
end

## home.scss
body.home {
  font-family: $LatoFamily;
  background: url("http://abcdef.com/assets/images/light-pattern.jpg");
  .navigation-bar {
    @extend .navbar;
    @extend .navbar-inverse;
    background-color: $charcoal;
    border: none;
    border-radius: 0px;
    margin-bottom: 0px;

    .nav-items {
      @extend .nav;
      @extend .navbar-nav;
      li {
        > a {
          text-transform: uppercase;
          color: $white;
          text-decoration: none;
        }
        &.active {
          a {
            background-color: darken($charcoal, 10%) !important;
          }
        }
        &:hover {
          a {
            background-color: lighten($charcoal, 10%) !important;
          }
        }
      }
    }
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<%= stylesheet_link_tag "application", params[:controller], :media => "all" %>
	<%= javascript_include_tag "application", params[:controller] %>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<%= csrf_meta_tags %>
	</head>

	<body class='<%= controller.controller_name %>'>

	<%= yield %>

	</body>
	</html>
	/*
	*= require_self
	*= require bootstrap-datepicker3
	*/

	@import "reset";
	@import "fonts";
	@import "colours";


	@import "bootstrap-sprockets";
	@import "bootstrap";
	@import "font-awesome-sprockets";
	@import "font-awesome";

	@import "grid-assist";
	@import "common-ui";
	# Be sure to restart your server when you modify this file.

	# Version of your assets, change this if you want to expire all your assets.
	Rails.application.config.assets.version = '1.0'

	# Add additional assets to the asset load path
	# Rails.application.config.assets.paths << Emoji.images_path

	# Precompile additional assets.
	# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
	# Rails.application.config.assets.precompile += %w( search.js )

	%w( home admin).each do \|controller\|
	Rails.application.config.assets.precompile += ["#{controller}.js", "#{controller}.css"]
	end
	body.home {
	font-family: $LatoFamily;
	background: url("http://abcdef.com/assets/images/light-pattern.jpg");
	.navigation-bar {
	@extend .navbar;
	@extend .navbar-inverse;
	background-color: $charcoal;
	border: none;
	border-radius: 0px;
	margin-bottom: 0px;

	.nav-items {
	@extend .nav;
	@extend .navbar-nav;
	li {
	> a {
	text-transform: uppercase;
	color: $white;
	text-decoration: none;
	}
	&.active {
	a {
	background-color: darken($charcoal, 10%) !important;
	}
	}
	&:hover {
	a {
	background-color: lighten($charcoal, 10%) !important;
	}
	}
	}
	}
	}
	}