rails 5.2.0,sass-rails 5.0.7,bootstrap 4.3.1 无法访问 .scss 文件中的 bootstrap 变量
rails 5.2.0, sass-rails 5.0.7, bootstrap 4.3.1 Can't access bootstrap variables within .scss files
当我尝试从 bootstrap 3 升级时,我在 Rails 项目上的一个 Ruby 遇到了问题。我删除了 bootstrap-sass gem 并按照 this github page 上的说明进行操作,但每当我从服务器请求页面时,我都会收到有关未定义颜色变量的错误。
我创建了一个新的 rails 项目,唯一目的是让 bootstrap 4 正常工作。
我的 Gemfile:
source 'https://rubygems.org'
gem 'rails'
gem 'puma'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'
gem 'bootsnap'
gem 'bootstrap', '~> 4.3.1'
group :development, :test do
gem 'sqlite3', '1.3.13'
gem 'byebug', '9.0.6', platform: :mri
end
group :development do
gem 'web-console', '3.5.1'
gem 'listen', '3.1.5'
gem 'spring', '2.0.2'
gem 'spring-watcher-listen', '2.0.1'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
application.scss
@import "bootstrap";
@import "custom";
application.js
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
custom.scss
@import "bootstrap";
h1 {
color: $gray;
}
当我导航到包含 h1 元素的页面时,我收到以下错误消息
Error: Undefined variable: "$gray".
on line 4 of app/assets/stylesheets/custom.scss
from line 2 of app/assets/stylesheets/application.scss
>> color: $gray;
如果我将 custom.scss 中的颜色更改为 $red,那么页面将完美加载,如果我删除 bootstrap 导入,我只会收到上面的错误,因此会发生一些颜色导入,而其他人则被忽略了。
我需要对 bootstrap 4 做些什么不同的事情?
也许 Bootstrap 3 和 4 中的变量不同?
你可以查看这个文件:
https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss。没有 $gray;
颜色变量。有不同深浅的灰色:
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
当我尝试从 bootstrap 3 升级时,我在 Rails 项目上的一个 Ruby 遇到了问题。我删除了 bootstrap-sass gem 并按照 this github page 上的说明进行操作,但每当我从服务器请求页面时,我都会收到有关未定义颜色变量的错误。
我创建了一个新的 rails 项目,唯一目的是让 bootstrap 4 正常工作。
我的 Gemfile:
source 'https://rubygems.org'
gem 'rails'
gem 'puma'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'
gem 'bootsnap'
gem 'bootstrap', '~> 4.3.1'
group :development, :test do
gem 'sqlite3', '1.3.13'
gem 'byebug', '9.0.6', platform: :mri
end
group :development do
gem 'web-console', '3.5.1'
gem 'listen', '3.1.5'
gem 'spring', '2.0.2'
gem 'spring-watcher-listen', '2.0.1'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
application.scss
@import "bootstrap";
@import "custom";
application.js
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
custom.scss
@import "bootstrap";
h1 {
color: $gray;
}
当我导航到包含 h1 元素的页面时,我收到以下错误消息
Error: Undefined variable: "$gray".
on line 4 of app/assets/stylesheets/custom.scss
from line 2 of app/assets/stylesheets/application.scss
>> color: $gray;
如果我将 custom.scss 中的颜色更改为 $red,那么页面将完美加载,如果我删除 bootstrap 导入,我只会收到上面的错误,因此会发生一些颜色导入,而其他人则被忽略了。
我需要对 bootstrap 4 做些什么不同的事情?
也许 Bootstrap 3 和 4 中的变量不同?
你可以查看这个文件:
https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss。没有 $gray;
颜色变量。有不同深浅的灰色:
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;