代码之家 › 专栏 › 技术社区 › Mike Glaz

Rails 5引导4如何打开引导变量

bootstrap-4 ruby-on-rails-5

Mike Glaz · 技术社区 · 7 年前

我遵循了引导rubygem设置说明。除了我尝试访问变量(如 $black $white 我得到了一个未定义变量的Sass::SyntaxError。我已经在谷歌上搜索了4个小时了。有什么我需要打开的吗?几年前,我曾在rails 4.2和bootstrap上成功地实现了这一点,但现在我不知所措。

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.2'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.3.18', '< 0.5'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem 'slim-rails'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
gem 'jquery-rails'
gem 'sprockets-rails'
# Use CoffeeScript for .coffee assets and views
# gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
# gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  # gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

应用程序.scss

$body-bg: $black;
@import "bootstrap";

application.js

//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

3 回复 | 直到 7 年前

wscourge Kiran Balakrishnan 6 年前

应用程序.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 "bootstrap";
@import "custom";

根据bootstrap gem的说明,我必须 require_tree 但是 require_self

有了这个,你就可以访问 $text-muted 或 $brand-primary 内部custom.scss。

$body-bg:    $black;
$body-color: $white;

或者更好的是,定义一个自定义变量。并在自定义css文件之前导入该文件。

@import "bootstrap";
@import "custom_variables";
@import "custom";

@import "custom_variables";
@import "bootstrap";
@import "custom";

Jeremy 7 年前

/*
 * 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_tree .
 *= require_self
 */

然后把

@导入引导

静态页面.sass:

// Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
$body-bg:    green  

@import bootstrap

body > div > p
  color: $red

所有这些都会奏效。不过,将一个变量传递到另一个变量似乎不起作用。

为清晰起见,请编辑:

// Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@import 'bootstrap';

// $red: #800000;


p {
  color: $red;
  }

如果其他一切都失败了,您可以克隆 this app 它会起作用的。

Mike Glaz 7 年前

找到了答案。这是直接从马嘴里说出来的。您需要下载 _bootstrap-variables.scss 文件来自 here app/assets/stylesheets .

取消注释要使用的变量(例如,$black、$white等)

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_tree .
 *= require_self
 */

@import "bootstrap-variables";

$body-bg: $black;
$body-color: $white;

@import "bootstrap";