레일에서 사용할 수없는 부트 스트랩 변수

Question

@ screen-sm @ screen-md @ screen-lg 변수를 작동 시키려면 어떻게해야합니까? 오류가 있습니까? bootstrap-sass gem을 사용하는 레일에서?

@ screen-sm @ screen-md @ screen-lg 변수를 제거하고 픽셀 값으로 바꿀 때 브라우저의 오류가 사라집니다. 그러나 이러한 변수를 사용할 때 브라우저의 레일 오류는 이러한 인수가 유효하지 않다고 말합니다.

3.0.3 부트 스트랩을 사용 중입니다.

또한 내 application.js 파일에 //=require bootstrap이 있습니다. github 페이지 https://github.com/twbs/bootstrap-sass을 사용하면 다른 파일에서 변수를 사용할 수 없지만 js 파일에서이 행을 제거하더라도 my application.css.scss 파일에서 변수를 사용할 수 없습니다.

application.css.scss

*= require_self 
*= require_tree . 
*/ 
@import "bootstrap"; 

/* Small devices (tablets, 768px and up) */ 
@media only screen and (min-width: @screen-sm){ 

} 

/* Medium devices (desktops, 992px and up) */ 
@media only screen and (min-width: @screen-md){ 

} 

/* Large devices (large desktops, 1200px and up) */ 
@media only screen and (min-width: @screen-lg){ 

} 

Gemfile

source 'https://rubygems.org' 
    ruby "2.0.0" 

    gem 'rails', '4.0.0' 
    gem 'uglifier', '>= 1.3.0' 
    gem 'sass-rails', '~> 4.0.0' 
    gem 'coffee-rails', '~> 4.0.0' 
    gem 'jquery-rails' 
    gem 'turbolinks' 
    gem 'jquery-turbolinks' 
    gem 'jbuilder', '~> 1.2' 
    gem 'sprockets-rails', :require => 'sprockets/railtie' 

    group :doc do 
     # bundle exec rake doc:rails generates the API under doc/api. 
     gem 'sdoc', require: false 
    end 

    gem 'html2haml', '~> 1.0.1' 
    gem 'haml-rails', '0.5.1' 
    gem 'bootstrap-sass', '~> 3.0.3.0' 

    gem 'figaro', '~> 0.7.0' 
    gem 'nokogiri', '~> 1.6.0' 
    gem 'paperclip', '~> 3.0' 
    gem 'paperclip-dropbox', '>= 1.1.7' 
    gem 'devise' 

    group :development do 
     # erubis is already included in action pack 
     gem 'ruby_parser', '~> 3.1.1' 
    end 

    group :development, :test do 
     gem 'sqlite3' 
    end 

    group :production do 
     gem 'pg' 
     gem 'rails_12factor' 

     #gem 'aws-sdk', "~> 1.0" 
    end 

    # Use ActiveModel has_secure_password 
    # gem 'bcrypt-ruby', '~> 3.0.0' 

    # Use unicorn as the app server 
    # gem 'unicorn' 

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

    # Use debugger 
    # gem 'debugger', group: [:development, :test] 

Answer 1

오늘은 같은 문제로 충돌했습니다. 문제의 근본 원인은 구문을 혼합하고 있다는 것입니다 (Less vs sass).

작문 지향성이 낮은 스타일 시트 변수는 연산자 @을 사용하여 참조됩니다. 반면에 파일 이름이 application.css.scss이므로 $을 사용하여 스컬을 사용하여 스타일 시트를 작성했습니다 (필자는 파일 이름이 application.css.scss이기 때문에이를 추측했습니다).

... 

@import "bootstrap"; 

/* Small devices (tablets, 768px and up) */ 
@media only screen and (min-width: $screen-sm){ 

} 

... 

:

은 그래서, 당신의 스타일 시트는 다음과 같이 작성해야합니다