CODEWITHSUNDEEP
rubyruby-on-rails-3bootstrap-4
AltFaks
AltFaks

Reputation: 1

Bootstrap in rails app works only with .scss

I am currently learning Rails and working on a simple SocialMedia/Blog app. I am at a point where I have a basic view set up and am attempting to apply BootStrap CSS to it.

I followed the following steps in attempting to apply BootStrap to my application:

1.) added gem 'bootstrap-sass' into gemfile and ran 'bundle install'

2.) added '*=require bootstrap' to application.css

3.) added '//= require bootstrap' to application.js

4.) added:

<div class="container">
   <%= yield %>
 </div>

However when I would open the app, I got an error stating 

couldn't find file 'bootstrap' with type 'text/css'

It would highlight the line "*=require bootstrap"

However, when I changed the extension to application.css.scss and added an @import statement as below, it worked with BootStrap applied

application.css.scss: 

* 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, or any plugin's
* vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over 
styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after 
the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require bootstrap
*= require_self
*/
@import "bootstrap";

So 2 questions...
1.) Why does my app require .scss and @import in order for BootStrap to work ?

2.) why does my "=require bootstrap" need to be "=require_bootstrap"?

THANKS!!

Upvotes: 0

Views: 897

Answers (2)

Champer Wu
Champer Wu

Reputation: 1271

application.css.scss:

*= require bootstrap  #remove it
*= require_self
*= require_tree .
*/

application.js

//= require bootstrap-sprockets
//= require jquery

And most important is open a new scss file and add : 

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

Upvotes: 0

Tek
Tek

Reputation: 183

Bootstrap-sass is a Sass implementation of the bootstrap CSS which is originally written in Less.

If you want just the Less css you can get it from getbootstrap.com

If you wish to keep using bootstrap-sass:

  • You'll need to rename your application.css to application.scss.
  • Remove *= require bootstrap.
  • Add lines as I indicated below starting with @import.
  • Also you'll want to include the bootstrap-sprockets.

This is how my working bootstraped applications's application.scss file looks:

...
 *
 *= require_self
 */
@import "bootstrap-sprockets";
@import "bootstrap";
...

My applicaiton.js

...
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//    
...
//= require bootstrap-sprockets
...

Checkout this reference https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1/ at the sectioned titled Integrating Bootstrap with Rails.

Upvotes: 0

Related Questions