I can't modify bootstrap-sass variables in rails application

Question

I am using the theme grasyscale-sass, mainly in one of the links of the project and ALL it works fine, and other links use its own SCSS file. In this scss file I want to change certain bootstrap variables as navbar-default-bg, etc, but to include two scss files (application.scss and my custom.scss file) with stylesheet_link_tag in the file application.html.erb I can't get the changes I've made to these variables in custom.scss, I think always the default values apply, however the normal code CSS is modified.

Any clue what I'm doing wrong? Or am I trying to do something "forbidden"?

Thanks in advance.

/**************/

Here application.html.erb file and how the two scss files are included, both in assets/stylesheets

<%= stylesheet_link_tag   'application', 'custom', media: 'all', 'data-turbolinks-track' => true %>

custom.scss file

$link-color: #cb2027;
$brand-primary: #cb2027; 
$body-bg: #e9e9e9;  
$navbar-default-brand-color: #cb2027;
$navbar-default-bg:#ffffff;  /* Navbar default */
$navbar-height: 30px;

$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;

i{
  color: #337ab7;
}

a{
  color: #cb2027;
}

@import "bootstrap";
@import "bootstrap-sprockets";

.center {
  text-align: center;
 }

.navbar-brand{
  font-size: 2em;
  font-weight: bold;
}
...

and application.js file, included in assets/javascripts

//
//= require_self
//= require jquery
//= require jquery_ujs
//= require jquery.easing
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
// require.js
//= require grayscale
//= require masonry/jquery.masonry
// require_tree . 

Answer 1

Import Bootstrap styles in app/assets/stylesheets/application.scss

@import "bootstrap"; and @import "bootstrap-sprockets"; go inside application.scss along with any other stylesheets.

Without going into how you can/should setup your directories for stylesheets, variables/mixins, etc. Your variables need to come before bootstrap in application.scss and your other customization's after:

Since you're using a theme that all ready has variables used to customize the base bootstrap styles, you'll have to change those Grayscale variables and/or styles in order to change them to what you want.

*In this example _variables = grayscale_variables from the theme and main.scss is basically application.scss.

application.scss

@import "grayscale_variables";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "_grayscale";
@import "style";

grayscale_variables.scss

$grayscale-primary: #cb2027;
$grayscale-dark: #e9e9e9;
$grayscale-light: #cb2027;

$grayscale-body-font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif;
$grayscale-headline-font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;

$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;

(*and only one bootstrap js should be used) see bootstrap-sass bootstrap-sprockets and bootstrap should not both be included in application.js

Answer 2

My application.scss, but remain unimplemented some variables, for example $body-bg, $navbar-default-bg and so, I think uses main.css of grayscale-sass theme.

I also tried changing the order of some @import

$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9; 
$body-bg: #fff;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg: #f8f8f8; 
$navbar-height: 30px;

$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;

@import 'masonry/transitions';
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'custom';
@import '../../../grayscale-sass/asset/sass/main.scss';