【问题标题】:Rails migrating Bootstrap from 3 to 4. File to import not found or unreadable: bootstrap/normalizeRails 将 Bootstrap 从 3 迁移到 4。要导入的文件未找到或不可读:bootstrap/normalize
【发布时间】:2019-04-12 02:05:35
【问题描述】:

所以我正在尝试将此应用程序从 Bootstrap 3 更新到 4 并收到以下消息:

找不到或无法读取要导入的文件:bootstrap/normalize

宝石文件:

ruby '2.5.1'

gem 'bootsnap', '>= 1.1.0', require: false
gem 'bootstrap', '~> 4.1.3'
gem 'dotenv-rails'
gem 'dropzonejs-rails'
gem 'jquery-rails'
gem 'kramdown'
gem 'nokogiri', '~> 1.6', '>=1.6.7'
gem 'oauth2'
gem 'pg', '~> 0.21'
gem 'puma', '~> 3.11'
gem 'rails', '~> 5.2.0'
gem 'rake', '~> 12.3.1'
gem 'redis'
gem 'rollbar'
gem 'sass-rails', '~> 5.0'
gem 'sidekiq'
gem 'uglifier', '>= 1.3.0'
gem 'verbalize'
gem 'whenever'
gem 'will_paginate', '~> 3.1.0'

应用程序.js

//= require rails-ujs
//= require rails-validator
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

应用程序.scss

@import "bootstrap";
@import "imports/bootstrap_theme";
@import "imports/bootstrap_modules";
@import 'imports/variables';

Gemfile.lock

bootstrap (4.1.3)
  autoprefixer-rails (>= 6.0.3)
  popper_js (>= 1.12.9, < 2)
  sass (>= 3.5.2)
bootstrap-sass (3.3.7)
  autoprefixer-rails (>= 5.2.1)
  sass (>= 3.3.4)

Application.html.erb 最初有以下内容:

<head>    
<!--Bootstrap Meta Tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" >
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>

<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script>
  feather.replace()
</script>


<%= yield %>

<!-- Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

当我将所有内容移至 bootstrap 4 gem 时,我从 application.html.erb 文件中删除了上述内容。

我注意到 bootstrap-sass 仍在 Gemfile.lock 中,但我终生无法弄清楚它为什么存在/卸载它。

如果我删除 Application.scss 中的导入组,我最终会得到 ​​p>

找不到或无法读取要导入的文件:bootstrap-sprockets。

具有以下突出显示:

更新了我的 Application.scss 文件,如下所示:

@import "imports/bootstrap_theme";
@import "imports/bootstrap_modules";
@import 'imports/variables';
@import "bootstrap";

这会导致:

$color: 'theme-color("primary")' 不是 `darken' 的颜色

我的文件中是否缺少某些内容?

【问题讨论】:

  • 有点猜想,但Application.scss 中的引导变量需要根据此处的指南在@import "bootstrap"; 之前声明-> rubydoc.info/gems/bootstrap/4.0.0
  • 更新了我的问题。这会导致另一个问题。
  • 我会追踪 bootstrap-sass,因为这可能是导致问题的原因。我用您的 Gemfile 创建了一个新应用程序,它运行良好(没有“imports/*”文件,因为我没有它们)。 'bootstrap-sprockets' 的原始错误指向 bootstrap-sass gem。在您的 Gemfile 的新应用程序中,我没有 bootstrap-sass gem。我无法加载 rails-validator (可能是纱线包)。可能是bootstrap-sass的来源

标签: ruby-on-rails bootstrap-4


【解决方案1】:

您可能在您的imports/bootstrap_modules 或其他文件中引用了bootstrap/normalize 已被bootstrap/reboot 替换。 Bootstrap 已更改模块,因此您必须更改文件。

另外,请注意,如果您使用 @import "bootstrap"; 导入所有内容,则不必导入 imports/bootstrap_modules

另请参阅this gem folder 了解可用的导入。

如果您需要更具体的答案,请提供相关信息,例如您导入的文件

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-02-08
    • 1970-01-01
    • 1970-01-01
    • 2019-06-03
    • 1970-01-01
    • 1970-01-01
    • 2014-12-19
    • 2018-07-04
    相关资源
    最近更新 更多