1

I'm trying to use bootstrap-sass (3.1.0.2) and sass-rails (4.0.1) in my rails (4.0.0) project.

My application.css.scss file looks like this:

/*
 * 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 vendor/assets/stylesheets of plugins, if any, 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
*= require_self
*= require font-awesome
*= require_tree .
*/

My bootstrap_and_overrides.css.scss file is in the stylesheets folder and looks like this:

@import "bootstrap";

I have a test page set up to try it out with this:

    <div class="container">
<h2>test terms</h2>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="bg-primary">.dfd..</p>
<p class="bg-success">..sdfas.</p>
<p class="bg-info">..sdfs.</p>
<p class="bg-warning">.asdf..</p>
<p class="bg-danger">.adf..</p>
<p>test terms</p>


<button type="button" class="btn btn-primary">Default</button>

</div>
<button type="button" class="btn btn-info">Info</button>

When I start the server and visit the page, it renders in plain text without the bootstrap styling.

Any ideas on what to do would be appreciated. It seems a few people on here don't use the gems. Is there a reason for this approach? Thanks very much!

Mel
  • 2,481
  • 26
  • 113
  • 273
  • could you please post the source of the html page? it might have some information. Also the layout file if possible – Muntasim Feb 08 '14 at 08:24
  • Did you run `bundle`? – Ivan Zamylin Feb 08 '14 at 08:29
  • Have you tried to required bootstrap in the application.css.scss? Or try to add the require inside conflig/application.rb (for me worked the second way, the first one returned errors) – Marko Jurinčič Feb 08 '14 at 08:30
  • Hi Marko, I didn't require it because the advice on getbootstrap suggests that it will prevent me from modifying the styling in the other sheets. Thanks for the tip though - I'll give that a try if I can't find another way to get it working. Thanks again – Mel Feb 08 '14 at 22:18

2 Answers2

5

I faced nearly the same problem few days ago. My configuration was quite the same but only few styling effects of Bootstrap were not working (especially the bg-whatever-color). After few gems updated the problem disappear.

Some of my gems that I updated

gem 'rails', '4.0.3'
gem "bootstrap-sass", "~> 3.1.1.0"
gem 'font-awesome-sass'
gem 'sass-rails', '~> 4.0.0'

Don't forget the: 

bundle update

Part of my application.scss to give you an idea

*= require jquery.ui.all
*= require select2
*= require font-awesome
*/

@import "mixin_and_var";
// changing the breakpoint value before importing bootstrap style
// This change is made for the menu (navbar) to collapse on tablet for better view
$screen-sm:1024px;
@import "bootstrap";

@import "general_layout";
@import "header";
@import "footer";
@import "menus";
@import "pagination";
@import 'login';
@import "error";

Hope it helps!

coding addicted
  • 3,422
  • 2
  • 36
  • 47
0

Here's my setup with https://github.com/twbs/bootstrap-sass:

# Gemfile
gem 'bootstrap-sass'

# application.css.scss
/*
 *= require_self
 *= require vendor
 * require_tree .
 */

@import "bootstrap";

// Import individual stylesheet
@import "base"; /* app/assets/stylesheets/base.css.scss */
@import "events"; /* app/assets/stylesheets/events.css.scss */

require_tree . is disabled, but importing individual CSS files (base, events) instead.

Victor
  • 13,010
  • 18
  • 83
  • 146
  • Hi Victor, thanks for sharing. I wonder if the order of the css acts is important. I have import bootstrap in a separate file in the stylesheets folder, which gets picked up by the tree. I've tried your setup and am not having any luck with it, but will try creating a new project - maybe there is something buggy elsewhere that is causing it not to work. Thanks very much for the reply. – Mel Feb 08 '14 at 22:20
  • Yes, the order of CSS import is important. In my case, if there is `body { background: white }` in my `base.css.scss`, and `body { background: red }` in my `events.css.scss`, the `body` `background` will be `red` instead because the latter overrides the former CSS. Use https://github.com/twbs/bootstrap-sass – Victor Feb 09 '14 at 03:20