Bootstrap SASS with Rails 4

Bootstrap Rails 4 sass layout not working

application.css.scss should be:

/*
 *= require bootstrap
 *= require_tree .
 *= require_self
 */

Also need to mention this gem in gemfile

 gem 'bootstrap-sass', '~> 3.1.1'

then

bundle install

and it works.

bootstrap-sass in Rails 4 not showing the proper glyphicons

After specifying the Gem version of the rails-sass.gem and the bootstrap-sass.gem it finally works.

gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'sass-rails', '~> 5.0.1'

Bootstrap Sass Rails 4 customize styling

Bootstrap doesn't use any variables in its style. It uses normal styles with values, like:

.col-md-12{width: 100%;} // it's a value, in this case 100% and not some variable

If you want to use the variables which you have defined, you need to import your variable file in files where you want to use them. Lets say you have a file named custom.css.scss where you want to use your variables then you need to do:

@import "bootstrap_and_customization";

.some_class{font-family: $font-family-sans-serif;}

I want to use these global variable across my whole app

Instead of requiring it in individual files what you can do is make a new file, lets say style.css.scss and import all of your stylesheet files there, something like:

@import "bootstrap_and_customization";
@import "file1";
@import "file2";

This will allow you to use variables inside file1.css.scss and file2.css.scss and then you can require style.css.scss inside application.css(also you'll have to remove require_tree since you are requiring each file individually inside style.css.scss) or you can also change application.css to application.css.scss and do the same thing

rails 5.2.0, sass-rails 5.0.7, bootstrap 4.3.1 Can't access bootstrap variables within .scss files

Maybe variables are different in Bootstrap 3 and 4?

You can check this file:
https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss . There is no $gray; color variable. There are different shades of gray:

$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

Repeated bootstrap imports in assets

Hi i'm gonna put an example organization for your project and then try to explain why i did every change i made, also i'm gonna be assuming that you are working on the last version of rails, some changes might not work in previous versions, so...

#app/assets/stylesheets/application.scss
/*
*= require_self
*/
@import "bootstrap-custom";
@import "font-awesome";
@import "store/common";

first rails accepts just scss extension now, same thing for coffee, so we are gonna use this notation, is important because we need to use imports instead of requires, requires are a css thing i belive, with imports that are from scss would know that it needs to pre render those files to css, for example, if you use a variables file and then require another bootstrap files, internally you will have a css compilations of variables and a css compilation of the bootstrap file, witch nether of those will have communication, supposedly the notation says that by pre named your files with "_" it should know that those are pieces of file, so in theory you could imports those as scss files and compile it before, but from my last project i have troubles with this and just be able to do it from 1 lvl, meaning that i can call a file from a subfile, do you follow me?, hope so...
so i usually go for import my bootstrap-custom at the top, in that position because bootstrap is pretty big and many times it would override another libraries that i'm using at the moment.

Next our bootstrap-custom file

@import "bootstrap-sprockets";
@import "bootstrap/bootstrap-variables";
@import "bootstrap";

//for example
html{
    //need it for sticky footer
    position: relative;
    min-height: 100%;
    body{
        padding-top: $navbar-height + 30px;
        padding-bottom: 350px;
    }
}

Ok, sprockets, always came first, is all the basic dependencies, then i personally like to have a copy of bootstrap-variables and modify my customizations as much as i can from here, many of these work in conjunction so you will have many modifications for free if you do it from here, also i think is more clear, and then any change that i need as scss code below, you need to keep in mind that any change in variables will work with the next import, "bootstrap", these are like ||= assignments, meaning that if no value is given before they would take the default one, so import those before bootstrap.

Usually the problems with bootstrap are multiple imports of the same file or imports of precompiled pieces of the scss generating no interaction between files, think about witch files should be scss and witch ones should be css(generally files that are precompiled libraries).

Finally

Rails.application.config.assets.precompile += %w( )

This place is for files that live out of your application files, so since you are using *=require_self, you don't need to imported again, you could always use other files, but that's another history, so you should be adding files like png, gif, fonts, etc, or generalizations of thoses *.png, but if your files are correctly structured, rails should let you know witch exactly files you need and if you are seen too many there is probably an error around there.

Sorry about the basic english and hope that this helps, regards!

Wrapping the bootstrap-sass gem in another gem causes asset manifests to break

Make sure 'bootstrap-sass' is required in your engine. One sensible place to do this is in your lib/my-engine.rb file:

require 'bootstrap-sass'

Adding the bootstrap-sass gem as a runtime dependency in the .gemspec isn't enough when you're trying to wrap gems.

---

Related Topics