was application.scss aussehen sollte, wenn Bootstrap-Sass Ruby on Rails

Question

verwenden, wenn bootstrap-sass die Dokumentation verwenden sagt:

alle entfernen * = require_self und * = require_tree. Aussagen von die Sass-Datei. Verwenden Sie stattdessen @import, um Sass-Dateien zu importieren.

meine aktuelle application.scss sieht aus wie

/* 
* 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 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. 
* 

*/ 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import "*"; 

das Problem ist, wenn ich Bootstrap-Arten außer Kraft setzen will, muss ich verwenden! Wichtig und ich kippe Zugang Bootstrap Mixins und Variablen

so was sollte application.scss aussehen wie bei bootstrap-sass

Answer 1

1. Über benötigen

*= require_self Mittel verwenden diese Datei (application.scss)

*= require_tree . Mittel verwenden, um alle Datei auf Ordner (Baum) stylesheets

Meiner Meinung nach, sollten Sie und die Nutzung benötigen alle Datei auf Baum statt require_tree. Da mit require Datei für Datei können Sie die Reihenfolge der Datei, die Sie ausführen möchten, steuern.

Also behalten *= require_self und entfernen *= require_tree . und benötigen alle Dateien, die Sie benötigen.

Mein Beispiel 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, vendor/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 styles 
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new 
* file per style scope. 
* 
*= require nprogress 
*= require nprogress-bootstrap 
*= require nprogress-turbolinks5 
*= require global  
*= require articles 
*= require search 
*= require footer 
*= require header 
*= require contacts 
*= require notices 
*= require aui-flash 
*= require_self 
*/ 


@import "bootstrap-sprockets"; 
@import "bootstrap"; 

2. Aufschalten Bootstrap Arten

Bootstrap-Arten außer Kraft zu setzen, gehen Sie folgendermaßen customize

Ein anderer Weg, um Stil Bootstrap zu ändern ist, eine ID setzen zu übergeordnete Elemente oder Elemente, die Sie ändern möchten

Ex :

Sie haben <button class="btn btn-primary">Hello</button>

Jetzt wollen Sie Klasse btn-primary-background-color: red

Sie versuchen <button class="btn btn-primary" id="red-primary">Hello</button>

Und Ihr Stil kann sich ändern:

#red-primary.btn-primary{ 
    background-color: red; 
} 

Aber mit dieser Art und Weise, jede Wenn Sie den Stil überschreiben möchten, muss das Element eine ID haben. Kann nicht gut sein.

UPDATE 1

Wenn Sie sass verwenden möchten. In deiner Bewerbung.sass

@import nprogress 
@import global 
@import articles