时间戳

首页 > 解决方案 > 将 bootstrap mixin 添加到 Rails 项目中。rbenv 错误？

ruby-on-rails - 将 bootstrap mixin 添加到 Rails 项目中。rbenv 错误？

问题描述

这是rails、bootstrap、media-breakpoint-only的延续，但我认为不需要再提及。

我有一个 Rails 项目，我正在尝试使用 Bootstrap 函数 media-breakpoint-only。

搜索我的计算机显示仅媒体断点定义在 ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets/bootstrap/ mixins/_breakpoints.scss

我的 ~/app/assets/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 last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * require_tree .
 * require_self
 */

// See 
//  https://www.youtube.com/watch?v=vcBXXOdPfgE&index=8&list=PLYM1n9xxMy4ClO2GjX73U3BLsXx9Z7wh5
$navbar-default-bg: red;

// Shnelvar
//   See https://github.com/twbs/bootstrap-sass
@import "bootstrap-sprockets";

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

// Shnelvar
//   For ralph-shiny-button etc.
@import "ralph";

// Shnelvar
//   See https://stackoverflow.com/questions/33404154/bootstrap-change-the-navbar-font-size
//   See https://teamtreehouse.com/community/how-do-you-change-the-bootstrap-font-style
.nav a{
    color: white !important;
    // font-size: 3.8em !important;
    font-size: 2.8em;
    }

@import "bootstrap/breakpoints";

// See https://getbootstrap.com/docs/4.0/layout/overview/
h1 {
 @include media-breakpoint-only(xs) {
   color: red;
 }
 @include media-breakpoint-only(sm) {
   color: green;
 }
 @include media-breakpoint-only(md) {
   color: blue;
 }
 @include media-breakpoint-only(lg) {
   color: yellow;
 }
 @include media-breakpoint-only(xl) {
   color: orange;
 }
}

请注意，我有

 * require_tree .
 * require_self

并不是

 *= require_tree .
 *= require_self

所以，我相信，“要求”被注释掉了。

当我尝试加载我的网页时，出现以下错误：

Sass::SyntaxError in StaticPages#root

Showing ~/app/views/layouts/application.html.erb where line #15 raised:

File to import not found or unreadable: bootstrap/breakpoints.
Load paths:
  ~/app/assets/config
  ~/app/assets/images
  ~/app/assets/javascripts
  ~/app/assets/stylesheets
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/coffee-rails-4.2.2/lib/assets/javascripts
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/jquery-rails-4.3.3/vendor/assets/javascripts
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actioncable-5.2.0/lib/assets/compiled
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activestorage-5.2.0/app/assets/javascripts
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionview-5.2.0/lib/assets/compiled
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/turbolinks-source-5.1.0/lib/assets/javascripts
  ~/node_modules
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/javascripts
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/fonts
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/images
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/javascripts
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/popper_js-1.14.3/assets/javascripts
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets
  ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-sass-3.3.7/assets/stylesheets

显然， ~/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/bootstrap-4.1.3/assets/stylesheets/bootstrap/mixins/ 不在任何加载路径中。

我想我可能有一个 rbenv 错误，但我不确定。

我的环境是
Rails 5.2.0
ruby​​ 2.5.1p57 (2018-03-29 修订版 63029) [x86_64-linux]

请进一步注意，如果我摆脱了@import "bootstrap/breakpoints"；以及我能够成功使用 Bootstrap 导航栏的 h1 css。因此，我假设我已经成功安装了引导程序。

帮助！！！

标签： ruby-on-railstwitter-bootstrapmixinsrbenv

解决方案

在宝石文件中

gem 'bootstrap-sass', '~> 3.2.0’

然后在样式表资产中将文件命名为 bootstrap_and_overrides.css.scss

@import "bootstrap”;

该视频可以帮助您了解如何将引导 gem 添加到您的 ruby​​ on rails 应用程序 https://www.youtube.com/watch?v=mxYsMacHHtU&t=122s

推荐阅读