1

Rails (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 ファイルは stylesheets フォルダーにあり、次のようになります。

@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>

サーバーを起動してページにアクセスすると、ブートストラップ スタイルなしでプレーン テキストでレンダリングされます。

何をすべきかについてのアイデアをいただければ幸いです。ここには宝石を使わない人がいるようです。このアプローチには理由がありますか？どうもありがとう！

4

2 に答える 2

5

私は数日前にほぼ同じ問題に直面しました。私の設定はまったく同じでしたが、Bootstrap のいくつかのスタイリング効果だけが機能していませんでした (特に bg-whatever-color)。いくつかの宝石が更新された後、問題は消えます。

私が更新した私の宝石のいくつか

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

次のことを忘れないでください。

bundle update

あなたにアイデアを与えるために私のapplication.scssの一部

*= 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";

それが役に立てば幸い！

于 2014-03-23T19:11:55.237 に答える
0

https://github.com/twbs/bootstrap-sassを使用したセットアップは次のとおりです。

# 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) をインポートしています。

于 2014-02-08T08:52:49.090 に答える