Erweitern Bootstrap mit Webpack

Question

Ich arbeite an einer Webanwendung, die derzeit bootstrap für das Front-End verwendet, und webpack, um seine Assets zu bündeln. Ich wurde von this Artikel inspiriert, um Web-Komponenten zu erstellen, die in winzige kleine eigenständige Einheiten gebrochen werden können, und this Artikel zu versuchen, meine Verwendung von Bootstrap semantischer zu machen.

Das Problem tritt auf, wenn ich versuche, die beiden Praktiken zu kombinieren, indem Sie versuchen, mehrere Webkomponenten zu erstellen, von denen jede die Funktionalität des Bootstrap erweitert. Beim Versuch, den Bootstrap in diese unabhängigen Komponenten zu importieren, werden die Stylesheets des Bootstrap im finalen css-Bundle, das vom Webpack generiert wird, mehrfach dupliziert.

Ich habe speziell bootstrap-sass verwendet, so dass ich auf die einzelnen Komponenten und Variablen des Bootstrap zugreifen kann. Auf diese Weise muss ich nur die Funktionalität importieren, die ich für jede Komponente benötige. Das löst aber immer noch nicht das Problem, den Code zu duplizieren, sondern reduziert ihn nur.

Idealerweise kann webpack so konfiguriert werden, dass alle diese Webkomponenten die gleiche Kopie des Bootstraps erweitern, aber ich kann nicht herausfinden, wie es geht.

Hier ist ein gist Ich habe erstellt, die das Problem demonstriert. Nach dem Ausführen des Codes generiert es app.css, die bootstrap final css doppelt dupliziert enthält.

Wie kann ich mein Projekt so strukturieren, dass ich Bootstrap semantisch erweitern kann, aber meine Stylesheets immer noch in unabhängige Webkomponenten aufteilen?

Answer 1

Ich arbeite an einem Projekt mit den gleichen Bedürfnissen. Das Beste, was ich geschafft habe, war folgendes:

Laden Sie zuerst Bootstrap durch bootstrap-loader. Dieses Paket kann Bootstrap nur einmal in Ihr gebündeltes CSS laden.

Vorausgesetzt, dass Sie auch CSS-loader, statt den Import Bootstrap und mit Hilfe der @extend Richtlinie in jedem sass verwenden, können Sie css composition verwenden. Beispiel: Sie möchten, dass Ihr div-Wrapper mit der Bootstrap-Klasse center-block zentriert wird. Sie können eine semantische Klasse Content-Wrapper und innerhalb Ihrer Komponente sass erklären können Sie

.content-wrapper{ 
     composes: center-block from global; 
    } 

Der Nachteil dieser aproach haben, ist, dass solche Zusammensetzungen für lokale Klassen gerade arbeiten, und nicht für andere Arten von Selektoren. Beispiel: Sie möchten die Übermittlungsschaltfläche eines Formulars basierend auf der Bootstrap-Klasse btn-primary formatieren. Keine der Regeln bellow wird

input[type="submit"] { 
     composes: btn-primary from global; 
    } 
    .my-form { 
     .my-btn-submit { 
     composes: btn-primary from global; 
     } 
    } 

Auf der hellen Seite arbeiten, wir sind nicht die einzigen, die nach einem Weg suchen Bootstrap modular zu erweitern. Vielleicht möchten Sie die folgenden Fragen zu GitHub überprüfen. Ich hätte sie verlinkt, aber es scheint, dass ich nicht genug Reputation habe, um über zwei Links zu posten.

• github.com/shakacode/bootstrap-loader/issues/12
• github.com/shakacode/bootstrap-loader/issues/9
• GitHub.com/css-modules/css-modules/issues/109