Rails가있는 부트 스트랩 Sass 4

Question

내 레일 (4.0.0) 프로젝트에서 bootstrap-sass (3.1.0.2) 및 sass-rails (4.0.1)를 사용하려고합니다.

내 application.css.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, vendor/assets/stylesheets, 
* or vendor/assets/stylesheets of plugins, if any, 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 top of the 
* compiled file, but it's generally better to create a new file per style scope. 
* 
*= require_self 
*= require font-awesome 
*= require_tree . 
*/ 

내 bootstrap_and_overrides.css.scss 파일이 스타일 시트 폴더에 있으며 다음과 같습니다

@import "bootstrap"; 

나는 검사를 페이지가 다음과 같이 시도해보십시오.

<div class="container"> 
<h2>test terms</h2> 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> 
<p class="bg-primary">.dfd..</p> 
<p class="bg-success">..sdfas.</p> 
<p class="bg-info">..sdfs.</p> 
<p class="bg-warning">.asdf..</p> 
<p class="bg-danger">.adf..</p> 
<p>test terms</p> 


<button type="button" class="btn btn-primary">Default</button> 

</div> 
<button type="button" class="btn btn-info">Info</button> 

서버를 시작하고 페이지를 방문하면 부트 스트랩 스타일링없이 일반 텍스트로 표시됩니다.

어떻게해야 할 지에 대한 아이디어는 인정 될 것입니다. 여기에있는 몇몇 사람들이 보석을 사용하지 않는 것 같습니다. 이 접근 방식에 대한 이유가 있습니까? 매우 감사합니다!

# Gemfile 
gem 'bootstrap-sass' 

# application.css.scss 
/* 
*= require_self 
*= require vendor 
* require_tree . 
*/ 

@import "bootstrap"; 

// Import individual stylesheet 
@import "base"; /* app/assets/stylesheets/base.css.scss */ 
@import "events"; /* app/assets/stylesheets/events.css.scss */ 

require_tree .을 사용하지 않고 대신 개별 CSS 파일 (base, events를) 가져 오기 :

Answer 1

여기 https://github.com/twbs/bootstrap-sass 내 설정이다.

Answer 2

며칠 전 거의 같은 문제에 직면했습니다. 내 구성은 꽤 비슷했지만 Bootstrap의 스타일 효과는 거의 작동하지 않았습니다 (특히 bg-whatever-color). 몇 가지 보석 업데이트 후 문제가 사라집니다. 아이디어

*= require jquery.ui.all 
*= require select2 
*= require font-awesome 
*/ 

@import "mixin_and_var"; 
// changing the breakpoint value before importing bootstrap style 
// This change is made for the menu (navbar) to collapse on tablet for better view 
$screen-sm:1024px; 
@import "bootstrap"; 

@import "general_layout"; 
@import "header"; 
@import "footer"; 
@import "menus"; 
@import "pagination"; 
@import 'login'; 
@import "error"; 

희망을 당신에게 내 application.scss의

bundle update 

부 :

내가

업데이트 나의 보석의 일부

gem 'rails', '4.0.3' 
gem "bootstrap-sass", "~> 3.1.1.0" 
gem 'font-awesome-sass' 
gem 'sass-rails', '~> 4.0.0' 

가 잊지 마세요

도움이됩니다!