【发布时间】：2018-02-13 02:13:37
【问题描述】：
我对 Rails 和 Bootstrap 还很陌生。我正在努力将 Bootstrap4 主题合并到 Ruby Rails 网站中。 我尝试时会显示所有带有一些文本的空白。 我已经安装了 BS4 bootstrap-rubygem。事实上，应用程序网站和所有基本的 BS 样式都可以在默认设置下正常工作。但是我在合并this Bootswatch Flatly Theme 时运气不佳，因为我非常喜欢这种样式。 On this page for Flatly Bootswatch 它为您提供了 6 个文件供您下载，即 bootstrap.min.css、bootstrap.css、variables.less、bootswatch.less、_variables.sass、_bootswatch.sass。我假设我只需要文件名中以下划线开头的 sass 文件。所以我把这两个文件放在 assets/stylesheets 文件夹中。网站上没有要下载的 js 文件，所以我可以假设我不需要资产/javascripts 文件夹的 js 文件吗？所以我没有粘贴任何js文件。 这是我的设置： 宝石文件：
source 'https://rubygems.org'(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# 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 'therubyracer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# 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', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
#Added by me
group :production do
gem 'pg', '~> 0.21.0'
end
# Added by MS
gem 'bootstrap', '~> 4.0.0.beta'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>OmegaBlog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="container-fluid">
<%= render 'layouts/navigation' %>
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</body>
</html>
application.scss（这应该称为 application.css.scss 吗？@import 项目的顺序正确吗？？ - 我对此有疑问）
@import "bootstrap";
@import "variables";
@import "bootswatch";
application.js（再次对此处列出的项目的顺序没有信心！）
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
所以问题是导航栏全是白色的，只有一些文本可见：
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="navbar">Navbar</h1>
</div>
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
</div>
我已经用 Rails 5.1 搜索了详细的 BS4 的基本说明，但没有运气！！
【问题讨论】：
-
您是否检查过 javascript 检查器以查看是否有任何 css 文件 404 并完成了 control shift r 以刷新页面缓存？
-
无 js 错误或 404。但是，它看起来并没有击中我的自定义 sasses。我正在研究application.scss 中的事物顺序。谢谢！
标签： ruby-on-rails ruby sass themes bootstrap-4