CODEWITHSUNDEEP
cssruby-on-railsrubytwitter-bootstrapthemes
Carlos Pereira
Carlos Pereira

Reputation: 391

Bootstrap CSS paths in Ruby on Rails

I have been trying to incorporate a Bootstrap theme into my Ruby on Rails project, I have succesfully installed Bootstrap onto my application, as the core Bootstrap classes work properly.

However, I cannot get it to load the CSS files associated with the bootstrap theme.

I have a partial for my header(layouts/_header.html.erb)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <title>Youvents - Your life, Your Events</title>

    <!-- Bootstrap Core CSS -->
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="stylesheets/modern-business.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">-->

</head>

My assets/stylesheets/application.css 

 *= require_tree .
 *= require_self
 *= require bootstrap_and_overrides

And I have the modern-business.css file and all the css associated with them on the stylesheets folder. However, the css fails to load when I run the server on my project.

Any idea or tips on how to fix this? And how does the Bootstrap css files work on Ruby on Rails?

Upvotes: 0

Views: 950

Answers (1)

rlarcombe
rlarcombe

Reputation: 2986

I wouldn't load Bootstrap that way because of getting the asset pipeline to precompile properly in production.

I recommend using the Bootstrap Sass gem

Then change your application.scss file to be a sass file: application.css.scss and load bootstrap like this:

// Load Bootstap and Font Awesome
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

Then import all your own css modules as sass files, by giving them the .scss ending

For example, you'd have modern-business.scss in app/assets/stylesheets and load it in the application.css.scss like so:

@import "modern-business";

Upvotes: 0

Related Questions