css - Ruby on Rails 6 Bootstrap 服务器重启时出现未定义变量错误
问题描述
我在 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;
解决方案
我也面临着同样的问题。这太令人沮丧了。首先删除 application.scss 文件中的所有注释,尤其是包含 .scss 的行*= require_self
。任何使用引导变量的文件都应该@import 'bootstrap/scss/bootstrap';
在顶部。以下将不起作用:
应用程序.scss:
@import 'bootstrap/scss/bootstrap';
@import 'custom.scss"
自定义.css:
body {
background-color: $gray-200;
}
而是将行@import 'bootstrap/scss/bootstrap';
从 application.scss 移动到 custome.scss,然后它将如下所示工作:
自定义.scss:
@import 'bootstrap/scss/bootstrap';
body {
background-color: $gray-200;
}
推荐阅读
- python - 数据框中的新列,其值来自 GroupBy 的最大行
- macros - doxygen 无法正确解析宏
- winforms - 如何为 DataGridviewColumn 类型声明变量?
- python - 带有 seaborn 或 pyplot 的 Python 子图
- php - 如果这些是自定义字段中的字符串,如何对日期进行排序?
- c++ - 即使文件存在,如何修复 QFile 打开错误(未知错误)?
- python - 为什么原始类型的子类在 Python 中占用更多内存?
- reactjs - React-Adal 使用 POST 请求返回 401,但使用 GET 请求返回 200
- dart - How to get last picture taken by user/camera
- kentico - Kentico 11 - MediaFileInfoProvider.DeleteMediaFileInfo 未删除