Wenn Bootstrap in mehreren SASS-Dateien verwendet wird, treten Probleme mit der Klassenüberschreibung auf. Was ist eine richtige SASS/Bootstrap-Struktur?

Question

Ich suchte eine Weile, konnte aber zu meiner Überraschung kein ähnliches Problem finden.

Ich verwende SASS und Bootstrap für eine Drupal-Installation. Ich habe eine einfache Dateistruktur:

• base.scss - Bietet Bootstrap und variable Importe.
• style.scss - die Module Projekt Importe:

style.scss

@import "base"; 
@import "util"; 

@import "node"; 
@import "project"; 
@import "breadcrumb"; 
@import "menu"; 

So natürlich alle diese [above].scss sind vorhanden und im selben Ordner befinden.

Mein Ziel

• Ich möchte in allen separaten Dateien verwenden Bootstrap: Knoten, Projekt, Paniermehl und Menü, aber nur einmal enthalten Bootstrap.

Das Problem

1. Wenn ich in einem der angegebenen Dateien @extend .breadcrumb; wollen ohne import "base"; kann der Wähler .breadcrumb nicht gefunden werden.
2. Wenn ich import "base"; in diesen n separaten Dateien werden Bootstrap-Selektoren n mal enthalten. Dies führt zu einem unglaublichen Durcheinander und macht das Übersteuern von Bootstrap-Selektoren kompliziert. Zum Beispiel möchte ich Bootstrap .navbar-toggle ändern. Wenn ich dies in node.scss tun würde, wird es durch den dann importierten Standard Bootstrap-Selektor in project.scss überschrieben werden.

Fragen

• Gibt es eine richtige Art und Weise Bootstrap, um nur einmal und es in mehrere anderen Dateien verwenden?
• Ich verstehe nicht wirklich, warum Problem Nr. 1 überhaupt existiert. SASS doc sagt:

Sass wird die Datei übernehmen, die Sie importieren möchten, und kombinieren es mit der Datei in die Sie importieren, so dass Sie eine einzelne CSS-Datei an den Webbrowser dienen kann.

• Also, wenn ich die oben genannten style.scss verwenden, dass die Einfuhren Bootstrap und nicht Import Bootstrap in den Modulen, warum der Compiler jede Bootstrap-Klasse zu lösen Fehler? Das klingt nicht wirklich nach kombiniert Importe, für mich. Oder fehlen mir einige der Grundlagen?

Vielen Dank im Voraus.

base.scss:

/*! 
* Bootstrap v3.3.7 (http://getbootstrap.com) 
* Copyright 2011-2016 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/../../bootstrap/stylesheets/bootstrap/blob/master/LICENSE) 
*/ 

// Core variables and mixins 

@import "variables"; 
@import "../../bootstrap/stylesheets/bootstrap/mixins"; 

// Reset and dependencies 
@import "../../bootstrap/stylesheets/bootstrap/normalize"; 
@import "../../bootstrap/stylesheets/bootstrap/print"; 
@import "../../bootstrap/stylesheets/bootstrap/glyphicons"; 

// Core CSS 
@import "../../bootstrap/stylesheets/bootstrap/scaffolding"; 
@import "../../bootstrap/stylesheets/bootstrap/type"; 
@import "../../bootstrap/stylesheets/bootstrap/code"; 
@import "../../bootstrap/stylesheets/bootstrap/grid"; 
@import "../../bootstrap/stylesheets/bootstrap/tables"; 
@import "../../bootstrap/stylesheets/bootstrap/forms"; 
@import "../../bootstrap/stylesheets/bootstrap/buttons"; 

// Components 
@import "../../bootstrap/stylesheets/bootstrap/component-animations"; 
@import "../../bootstrap/stylesheets/bootstrap/dropdowns"; 
@import "../../bootstrap/stylesheets/bootstrap/button-groups"; 
@import "../../bootstrap/stylesheets/bootstrap/input-groups"; 
@import "../../bootstrap/stylesheets/bootstrap/navs"; 
@import "../../bootstrap/stylesheets/bootstrap/navbar"; 
@import "../../bootstrap/stylesheets/bootstrap/breadcrumbs"; 
// [...] other components 

// Components w/ JavaScript 
@import "../../bootstrap/stylesheets/bootstrap/modals"; 
@import "../../bootstrap/stylesheets/bootstrap/tooltip"; 
// [...] 

// Utility classes 
@import "../../bootstrap/stylesheets/bootstrap/utilities"; 
@import "../../bootstrap/stylesheets/bootstrap/responsive-utilities"; 

Answer 1

Haben Sie Sass starter kit verwenden, die mit Bootstrap Thema kommt?

Von dem, was ich weiß, sie empfehlen Ihr style.scss wie folgt aussehen:

// Default variables. 
@import 'default-variables'; 

// Bootstrap Framework. 
@import '../bootstrap/assets/stylesheets/bootstrap'; 

// Base-theme overrides. 
@import 'overrides'; 

Also meine Vermutung ist, dass Sie Variablen und Bootstrap-Dateien in style.scss durch zusätzliche Dateien gefolgt importieren.

Sie können dann Variablen und Überschreibungen hinzufügen/bearbeiten, und Sie sollten in der Lage sein, zusätzliche Dateien wie Knoten, Menü usw. zu importieren. Sie alle sollten Zugriff auf Bootstrap-Selektoren und Variablen haben.

Es tut mir leid, wenn ich Ihre Frage missverstanden habe. Ich benutze ein älteres Setup mit Bootstrap und Less.