rails 5 bootstrap 4自定义

问题描述 投票:2回答:1

刚刚升级到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;
}

提前致谢 :)

ruby-on-rails bootstrap-4
1个回答
1
投票

@import之后,分号丢失了。确保还定义了变量$light-gray。我认为带有bootstrap 4版本的@import与bootstrap 3的工作方式非常相似。

© www.soinside.com 2019 - 2024. All rights reserved.