Was ist der richtige Weg Bootstrap in meine application.css.scss Datei einzuschließen?

Question

Ich verwende Rails 4.2.3. Ich habe diese Datei, app/assets/stylesheets/application.css.scss (fragt mich nicht, warum, als ich das Projekt erstellt habe, hat Rails diese Datei automatisch für mich erstellt).

/* 
… 
*= require_self 
*= require_tree . 
*= require jquery-ui 
*/ 

html { 
    background-image: url(/assets/tile.jpg); 
    background-repeat: repeat; 
    background-position: left top; 
} 

Ich wollte Bootstrap hinzufügen und verschiedene Tutorials empfohlen I „@import“ -Aussagen fügte hinzu, es funktioniert. Also habe ich versucht

… 
*= require_self 
*= require_tree . 
*= require jquery-ui 
*/ 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import 'bootstrap/theme' 

html { 
    background-image: url(/assets/tile.jpg); 
    background-repeat: repeat; 
    background-position: left top; 
} 

aber jetzt, wenn ich meine Seite, die ich den Fehler laden

Sass::SyntaxError in Users#edit 

Invalid CSS after "html ": expected selector or at-rule, was "{" 

Was ist der richtige Weg, um die Bootstrap-Richtlinien in meiner application.css.scss Datei enthalten?

Answer 1

Sie haben vergessen, Ihren letzten Import mit einem Semikolon zu beenden.

/* 
*= require_self 
*= require_tree . 
*= require jquery-ui 
*/ 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import 'bootstrap/theme'; 

html { 
    background-image: url(/assets/tile.jpg); 
    background-repeat: repeat; 
    background-position: left top; 
} 

Answer 2

Persönlich bevorzuge ich alle meine Vermögenswerte über scss importieren.

Fügen Sie das Bootstrap-Juwel dem Gemfile hinzu, https://rubygems.org/gems/bootstrap. Erstellen Sie einen Ordner bootstrap_and_overrides in app/assets/stylesheets und app/assets/javascripts.

app 
|_assets 
    |_javascripts 
    |_bootstrap_and_overrides 
     |_bootstrap.js 
    |_stylesheets 
    |_bootstrap_and_overrides 
     |_bootstrap.scss 
     |_variables.scss 
     |_overrides.scss 

Ihre application.js sieht ungefähr so ​​aus:

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require tether 
//= require bootstrap_and_overrides/bootstrap 

Und Ihre application.css.scss:

@import "bootstrap_and_overrides/variables"; 
@import "bootstrap_and_overrides/bootstrap"; 
@import "bootstrap_and_overrides/overrides"; 

Beispiel für bootstrap.js auf Ihrem Javascript Vermögen. Mit diesem können Sie entscheiden, was zu laden und was nicht:

//= require bootstrap/util 
//= require bootstrap/alert 
//= require bootstrap/button 
// require bootstrap/carousel 
//= require bootstrap/collapse 
//= require bootstrap/dropdown 
// require bootstrap/modal 
// require bootstrap/scrollspy 
//= require bootstrap/tab 
//= require bootstrap/tooltip 
//= require bootstrap/popover 

Beispiel für bootstrap.scss in Ihrem Stylesheet Vermögen:

// Core variables and mixins 
//@import "bootstrap/variables"; 
@import "bootstrap/mixins"; 
// Reset and dependencies 
@import "bootstrap/normalize"; 
@import "bootstrap/print"; 
// Core CSS 
@import "bootstrap/reboot"; 
@import "bootstrap/type"; 
@import "bootstrap/images"; 
//@import "bootstrap/code"; 
@import "bootstrap/grid"; 
@import "bootstrap/tables"; 
@import "bootstrap/forms"; 
@import "bootstrap/buttons"; 
// Components 
@import "bootstrap/animation"; 
@import "bootstrap/dropdown"; 
@import "bootstrap/button-group"; 
//@import "bootstrap/input-group"; 
//@import "bootstrap/custom-forms"; 
@import "bootstrap/nav"; 
@import "bootstrap/navbar"; 
@import "bootstrap/card"; 
@import "bootstrap/breadcrumb"; 
@import "bootstrap/pagination"; 
@import "bootstrap/pager"; 
@import "bootstrap/labels"; 
//@import "bootstrap/jumbotron"; 
@import "bootstrap/alert"; 
@import "bootstrap/progress"; 
@import "bootstrap/media"; 
@import "bootstrap/list-group"; 
@import "bootstrap/responsive-embed"; 
@import "bootstrap/close"; 
// Components w/ JavaScript 
//@import "bootstrap/modal"; 
@import "bootstrap/tooltip"; 
@import "bootstrap/popover"; 
//@import "bootstrap/carousel"; 
// Utility classes 
@import "bootstrap/utilities"; 
@import "bootstrap/utilities-background"; 
@import "bootstrap/utilities-spacing"; 
@import "bootstrap/utilities-responsive"; 

Diese beiden Dateien sind einfach eine kopierte Version vom Bootstrap gem. Die variables.scss ist auch die Standard-Variablen-Datei aus dem Bootstrap-Juwel. Ich denke, dies ist die beste Möglichkeit, um Bootstrap zu Ihrem Rails-Projekt mit totaler Kontrolle, was zu laden und was nicht.