无法使Bootstrap在Ruby on Rails应用程序中工作

Question

I am struggling to adapt bootstrap 4 working in my Rails application. I have followed the instructions from here and here . I have placed simple navbar

 <nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
 </nav>

in my application.html.erb file but nothing changed. After a few hours of searching I found same questions here but no any working solution. This is my Gemfile source ' https://rubygems.org ' git_source(:github) { |repo| " https://github.com/# {repo}.git" }

  ruby '2.3.3'

  # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
  gem 'rails', '~> 5.2.0'
  # Use postgresql as the database for Active Record
  gem 'pg', '>= 0.18', '< 2.0'
  # Use Puma as the app server
  gem 'puma', '~> 3.11'
  # Use SCSS for stylesheets
  gem 'sass-rails', '~> 5.0'
  # Use Uglifier as compressor for JavaScript assets
  gem 'uglifier', '>= 1.3.0'
  # See https://github.com/rails/execjs#readme for more supported 
  runtimes
  # gem 'mini_racer', platforms: :ruby

  # Build JSON APIs with ease. Read more: 
  https://github.com/rails/jbuilder
  gem 'jbuilder', '~> 2.5'
  # Use Redis adapter to run Action Cable in production
  # gem 'redis', '~> 4.0'
  # Use ActiveModel has_secure_password
  # gem 'bcrypt', '~> 3.1.7'

  # Use ActiveStorage variant
  # gem 'mini_magick', '~> 4.8'

  # Use Capistrano for deployment
  # gem 'capistrano-rails', group: :development

  # Reduces boot times through caching; required in config/boot.rb
  gem 'bootsnap', '>= 1.1.0', require: false

  group :development, :test do

  end

  group :development do
   # Access an interactive console on exception pages or by calling 
  'console' anywhere in the code.
   gem 'web-console', '>= 3.3.0'
   gem 'listen', '>= 3.0.5', '< 3.2'
  end


  # Windows does not include zoneinfo files, so bundle the tzinfo-data 
  gem
  gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

  gem 'pry-rails', group: [:development, :test]
  gem 'jquery-rails'
  gem 'dotenv-rails', group: [:development, :test]
  gem 'rspec-rails', group: [:development, :test]
  gem 'capybara', group: [:development, :test]
  gem 'launchy', group: [:development, :test]
  gem 'factory_bot', group: [:development, :test]
  gem 'database_cleaner', group: [:development, :test]
  gem 'valid_attribute', group: [:development, :test]
  gem 'shoulda-matchers', group: [:development, :test], require: false
  gem 'devise'
  gem 'bootstrap', '~> 4.1.3'
  gem 'webpacker', '~> 3.3'

This is my app/stylesheets/application.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
 * It is generally better to create a new file per style scope.
 *
 @import 'bootstrap';
 */

here is my app/javascripts/application.js

 // This is a manifest file that'll be compiled into application.js,                
 which will include all the files
 // listed below.
 //
 // Any JavaScript/Coffee file within this directory,           
 lib/assets/javascripts, or any plugin's
 // vendor/assets/javascripts directory can be referenced here using a 
 relative path.
 //
 // It's not advisable to add code directly here, but if you do, it'll 
 appear at the bottom of the
 // compiled file. JavaScript code in this file should be added after 
 the last require_* statement.
 //
 // Read Sprockets README 
 (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
 //= require jquery3
 //= require jquery_ujs
 //= require bootstrap
 //= require bootstrap-sprockets
 //= require popper
 //= require activestorage
 //= require_tree .

Please help if you know how to set it up right. Thank you in advance.

Answer 1

@import 'bootstrap'; should be outside of your comments

 /*
  * 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
 * It is generally better to create a new file per style scope.
 *
 */

 @import 'bootstrap';