0

I'm using sass-bootstrap for my project, I have a _colors.scss file where I save my colors variables . I import my _colors.scss before importing bootstrap.

I can modify main bootstrap variables like:

$navbar-default-link-active-color: red;

// active link in header menu became red

But I cannot use color var in my other sass files like:

$brand-primary: #428bca;

body {
  color: $brand-primary;
}
// this give undefined variable

How is that?

My import application.css.scss:

@import "base-elements/colors";
@import "base-elements/typography";
@import "base-elements/helpers";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-theme.min";
@import "components/login";
@import "components/carousel";
@import "pages/pages";
Giorgia Sambrotta
  • 1,133
  • 1
  • 15
  • 45
  • @GiorigiaSambrotta You need to import that file into your `application.css.scss`. please check this url: http://stackoverflow.com/questions/25281456/bootstrap-sass-rails-4-customize-styling – anusha Oct 13 '14 at 11:37
  • thank you, i'm already importing that file in application.css.scss, I just discover that there is maybe a bug with sass and sass-rails gem. I will give this as answer – Giorgia Sambrotta Oct 13 '14 at 11:54

1 Answers1

0

Just discover that sass-rails version bigger than 4.0.1 doesn't work well with bootstrap. I needed to define 

gem sass-rails '4.0.1 '

and 

gem 'sprockets', '2.11.0'

in order to make colours and bootstraps mixins working properly

Hopefully that can help someone else

Giorgia Sambrotta
  • 1,133
  • 1
  • 15
  • 45