繁体   English   中英

rails 5.2.0,sass-rails 5.0.7,引导程序4.3.1无法访问.scss文件中的引导程序变量

[英]rails 5.2.0, sass-rails 5.0.7, bootstrap 4.3.1 Can't access bootstrap variables within .scss files

当我尝试从bootstrap 3升级时,我遇到了一个Ruby on Rails项目。我删除了bootstrap-sass gem并按照此github页面上的说明进行操作,但是每当我从服务器请求页面时,我都会得到一个有关颜色的未定义变量的错误。

我做了一个新的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 4做些什么?

引导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;

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM