Assets pipeline doesn't work in 'application.scss' in my Rails 4.2 app

Question

I'm new in Rails and apologize if that is a stupid question. But i cannot resolve my problem: I added Bootstrap to my new app but it still doesn't use any new styles.

I've renamed application.css to application.scss and created such structure:

|-stylesheets
   |-elements
   |--articles
   |---article.scss
   |-application.scss

Application.scss

/* User styles
* Plugins first
 */
@import "bootstrap-sprockets";
@import "bootstrap";

@import "elements/**/*";

/*
 * 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_self
 */

In Gem file i've added

source 'https://rubygems.org'
ruby '2.2.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2'

# Установка Bootstrap
gem 'sass-rails'
gem 'bootstrap-sass'
#Autoprefixer optional, but recommended. It automatically adds the proper vendor prefixes to your CSS code when it is compiled.
gem 'autoprefixer-rails'

Application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .

I've tried to write any style rules in article.scss but my app doesn't use them, so as any Bootstrap styles.

Answer 1

there is an easier way, I will describe the sequence: after adding gem 'bootstrap-sass' doing bundle install, restart server than add in config/application.rb next string:

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

for your images, than create custom.css.scss in app/assets/stylesheets and add there @import "bootstrap";, in your custom.css.scss you can write your own styles

Answer 2

I suspect you have an older version of bootstrap in your environment. Try updating your Gemfile with gem 'bootstrap-sass', '3.3.3' and running bundle. Make sure to restart your server after the update.

Alternatively, you can just run bundle update.

Answer 3

After several hours i've found a problem - my pages_controller was incorrect:

class PagesController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
end

instead of:

class PagesController < ApplicationController
  def index_page
  end
end

Controllers should inherit from main Controller!

P.S: Adding string layout "application" to the wrong controller also helped:

class PagesController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
  layout "application"
end

But I do not recommend go that way