刚刚升级到bootstrap 4.在旧版本中,我在app / assets / stylesheets / custom.scss文件中使用@import bootstrap
,因此自定义工作正常。
现在,按照getbootstrap.com入门指南,我在我的application.scss中包含了@import bootstrap
,并且自定义已停止工作。
这是我的宝石文件;
gem 'rails', '5.1.4'
gem 'bcrypt', '~> 3.1.7'
gem 'faker', '1.7.3'
gem 'will_paginate', '3.1.6'
gem 'bootstrap-will_paginate', '1.0.0'
gem 'puma', '3.9.1'
gem 'uglifier', '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.7.0'
gem 'coffee-script-source', '1.8.0'
gem 'letsencrypt_plugin', '~> 0.0.10'
gem 'etsy', '~> 0.3.2'
gem 'bootstrap', '~> 4.0'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
gem 'popper_js', '~> 1.12', '>= 1.12.9'
我的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 last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
@import "bootstrap"
这是我想要在custom.scss中工作的内容:
body {
padding-top: 60px;
background-color: $light-gray!important;
}
提前致谢 :)
在@import
之后,分号丢失了。确保还定义了变量$light-gray
。我认为带有bootstrap 4版本的@import
与bootstrap 3的工作方式非常相似。