Ruby on Rails 6 Bootstrap 服务器重启时出现未定义变量错误答案

【问题标题】：Ruby on Rails 6 Bootstrap undefined variable error on server restartRuby on Rails 6 Bootstrap 服务器重启时出现未定义变量错误
【发布时间】：2021-01-27 18:18:05
【问题描述】：

我在 Rails 6 中遇到问题，当我重新启动服务器时出现错误：未定义的变量。如果我注释掉文件中的任何 scss 变量，刷新页面，取消注释变量并再次刷新一切正常，我可以再次在我的 CSS 文件中使用变量。我不确定为什么会发生这种情况，任何人都可以提供任何帮助，我们将不胜感激。

这是我的 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_self
 */

@import "custom_variables";
@import 'bootstrap/scss/bootstrap';
                                             
@import "@fortawesome/fontawesome-free/css/all.css";
@import 'layouts';
@import 'themes';
@import 'typography';
@import 'states';

这里是我使用变量的文件：

.dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
}

@media only screen and (min-width: map_get($grid-breakpoints,"lg")) {
    .dropdown:hover>.dropdown-menu {
        visibility: visible;
        opacity: 1;
    }
}

@media only screen and (max-width: map_get($grid-breakpoints,"lg")) {
    .dropdown-menu {
        display: none;
    }
}

.footer a:hover {
    text-decoration: none;
}

.bg-dark-red {
  background-color: $banner-color;
}

.navbar, .footer {
  background-color: $navbar-bg-color;
  
  a {
    color: $navbar-color;
  }

  a:hover {
    color: $navbar-hover-color;
  }

  .active {
    color: $navbar-active-color;
  }
}

.dropdown-menu {
  background-color: $navbar-bg-color;
  
  a {
    color: $navbar-color;
  }

  a:hover {
    color: $navbar-hover-color;
    background-color: inherit;
  }

  .dropdown-divider {
    border-top-color: $dropdown-border-color;
  }
}

section.map {
  background-color: $map-bg-color;
}

.btn-primary {
  @include button-variant($primary-btn-color, darken($primary-btn-color, 7.5%), darken($primary-btn-color, 10%), lighten($primary-btn-color,5%), lighten($primary-btn-color, 10%), darken($primary-btn-color,30%));
}

关于我可以做些什么来阻止这种情况发生的任何建议？

编辑：我忘记包含我要导入变量的文件，这里是：

$white: #fff;
$black: #000;
$primary-color: #FF0103;
$complementary-color: complement($primary-color);

$navbar-color: rgba($white, .55);
$navbar-bg-color: #343A40;
$navbar-hover-color: rgba($white, .75);
$dropdown-border-color: rgba($black, .15);
$navbar-active-color: $white;

$banner-color: $primary-color;
$primary-btn-color: #198754;
$map-bg-color: #E1E1E1;

【问题讨论】：

你试过删除*= require_self吗？ Sprockets 指令往往会对 SCSS 造成严重破坏。只有当您想更改文件内容相对于 Sprockets 导入的其他文件的顺序时，才真正需要它。
刚刚试了一下，还是一样的错误。您是否建议仍然保留该行？
要在其中声明变量的文件的文件扩展名是什么？
一些变量是引导变量，因此它们是从引导 .scss 文件加载的，但我也有一些自定义变量是从 .scss.erb 文件加载的，这可能会导致问题?
谁能告诉我为什么这个问题被关闭了？我被告知是因为我没有提供错误，但我显然在第一行，它还说我没有提供任何所需的行为，但我认为很清楚所需的行为是什么。感谢任何人都可以给我的任何意见

标签： css ruby-on-rails ruby bootstrap-4

【解决方案1】：

我也面临同样的问题。这太令人沮丧了。首先删除 application.scss 文件中的所有 cmets，尤其是 *= require_self 的行。任何使用引导变量的文件都应该在顶部有@import 'bootstrap/scss/bootstrap';。以下将不起作用：

application.scss：

@import 'bootstrap/scss/bootstrap';
@import 'custom.scss"

custom.css：

body {
    background-color: $gray-200;
}

将@import 'bootstrap/scss/bootstrap';这一行从application.scss移到custome.scss，如下图所示：

custom.scss：

@import 'bootstrap/scss/bootstrap';
body {
    background-color: $gray-200;
}

【讨论】：