rails，bootstrap，media-breakpoint-only
我花了一天的时间在网上试图让bootstrap的媒体断点 – 只在没有找到明确指示的情况下工作。
我有引导导航栏工作，所以，我怀疑，我已正确安装引导程序。
我想让以下代码工作：
h1 { @include media-breakpoint-only(xs) { color: red; } @include media-breakpoint-only(sm) { color: green; } @include media-breakpoint-only(md) { color: blue; } @include media-breakpoint-only(lg) { color: yellow; } @include media-breakpoint-only(xl) { color: orange; } } 但是我不知道在哪里放置这些代码或者我需要做些什么来让媒体断点才能正常工作。
当我将上面的代码放在application.scss的末尾（见下文）时，我收到以下错误：
未定义的mixin’media-breakpoint-only’。
我的Gemfile是
source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.5.1' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.2.0' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', ' 3.11' # 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 'mini_racer', platforms: :ruby # Shnelvar gem 'jquery-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', '~> 4.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use ActiveStorage variant # gem 'mini_magick', '~> 4.8' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.1.0', require: false 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] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '>= 3.0.5', ' 2.0.0' end group :test do # Adds support for Capybara system testing and selenium driver gem 'capybara', '>= 2.15', ' 3.3', '>= 3.3.7' gem 'bootstrap', '~> 4.1.3'
的application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require rails-ujs // Shnelvar // From https://github.com/rails/jquery-rails // If you are running Rails 5.1 and up, and if you have included //= require rails-ujs, then jquery_ujs is not needed anymore. You can just add: // require jquery_ujs //= require activestorage //= require turbolinks //= require_tree . // Shnelvar // See https://github.com/twbs/bootstrap-rubygem //= require jquery3 //= require popper //= require bootstrap-sprockets
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 */ // See // https://www.youtube.com/watch?v=vcBXXOdPfgE&index=8&list=PLYM1n9xxMy4ClO2GjX73U3BLsXx9Z7wh5 $navbar-default-bg: red; // Shnelvar // See https://github.com/twbs/bootstrap-sass @import "bootstrap-sprockets"; // Custom bootstrap variables must be set or imported *before* bootstrap. @import "bootstrap"; // Shnelvar // For ralph-shiny-button etc. @import "ralph"; // Shnelvar // See https://stackoverflow.com/questions/33404154/bootstrap-change-the-navbar-font-size // See https://teamtreehouse.com/community/how-do-you-change-the-bootstrap-font-style .nav a{ color: white !important; // font-size: 3.8em !important; font-size: 2.8em; }
这很可能是因为您在自己的样式表之后导入引导程序样式表。 见， * require_tree . 在application.css文件中意味着你从app/assets/stylesheets导入所有的样式app/assets/stylesheets ，所以你得到一个错误，因为那时bootstrap的mixins还没有。
要修复它，我建议您创建一个全局样式表文件。 app/assets/stylesheets/main.scss ，您可以按正确的顺序导入所有内容。
// app/assets/stylesheets/main.scss $navbar-default-bg: red; @import "bootstrap-sprockets" @import "bootstrap" @import "some-file" // import specific file from app/assets/stylesheets/ @import "some-dir/*" // import whole directory from app/assets/stylesheets/ // any other styles here
并且在application.css只保留：
/* * 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 main * require_self */