Sass is breaking on @extend ".bg-faded"

Question

I used Rails Composer to create a skeleton application for the rails-devise-roles project described here:

https://github.com/RailsApps/rails-devise-roles

I'm getting a 500 error generated by the following:

Sass::SyntaxError - ".authform form" failed to @extend ".bg-faded".
The selector ".bg-faded" was not found.
Use "@extend .bg-faded !optional" if the extend should be able to fail.

Adding the "!optional" flag allows it to render, but none of the navigation links are then displayed.

Contents of my Gemfile are displayed below:

source 'https://rubygems.org'
git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end
ruby '2.2.5'
gem 'rails', '~> 5.1.3'
gem 'sqlite3'
gem 'puma', '~> 3.7'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end
group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'bootstrap', '~> 4.0.0.alpha6'
gem 'devise'
gem 'high_voltage'
gem 'jquery-rails'
gem 'unicorn'
gem 'unicorn-rails'
group :development do
  gem 'better_errors'
  gem 'rails_layout'
  gem 'spring-commands-rspec'
end
group :development, :test do
  gem 'factory_girl_rails'
  gem 'faker'
  gem 'rspec-rails'
end
group :test do
  gem 'database_cleaner'
  gem 'launchy'
end

Thoughts?

Answer 1

Changing @extend .bg-faded to @extend .bg-light will fix your error

Answer 2

Its most likely because you haven't imported the framework CSS. Add these to your application.scss file

// import the CSS framework
@import "bootstrap";