wie, um das setup bootstrap-4 scss mit reagieren webpack

fange ich ein neues Projekt mit reactjs ES6 und webpack

mit reagieren-static-boilerplate-starter Frage ist, wie kann ich importieren bootstrap4 in der build-proccess ?

ich möchte nicht, dass die Verwendung der bootstrap.css-Datei generiert, sondern ich will webpack bauen es für mich, so kann ich bekommen zum ändern der @ - Variablen und anwenden mein theme etc.

ich startete das Projekt durch das Klonen boilerplate

> git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install
  1. installiert bootstrap mit npm

    npm installieren [email protected]

nun, wenn ich immer auf die wichtigsten bootstrap-Datei in mein index.js es wird geladen, in Ordnung. aber wie kann ich die sass-Dateien von bootsrap zu starten customizing es ?

Nur um zu klären, Fragen Sie, wie können Sie verlangen, die bootstrap-SASS-Dateien in Ihrem Reagieren-Komponenten anstelle von CSS-Dateien?
ja und wie zu überschreiben default-bootstrap-Variablen
Das repo Sie geklont ist mit Hilfe des post-und css scheint nicht zu haben, sass-loader einrichten für webpack. Wenn Sie verwenden möchten, sass, kann es einen Versuch Wert, einen anderen boilerplate, das eingerichtet ist für sass statt postcss. Andernfalls müssen Sie die sass-loader zu diesem repo. Sobald Sie eine sass bauen, arbeiten, Sie wollen Ihre eigenen benutzerdefinierten Variablen Datei, die Sie importieren, bevor bootstrap, mit überschreiben default-bootstrap-Variablen. Ich werde eine vollständige Antwort, sobald Sie bestätigt haben, sass vs postcss Richtung Sie gehen wollen und wenn Sie wollen stick mit diesem vorformulierten Text.
vielen Dank ja ich bin mit sass nun mit github.com/coryhouse/react-slingshot, wie kann ich importieren bootstrap-sass-Dateien nun nochmals vielen Dank.
Hast du meine Antwort @Zalaboza? Es ist alles bereit zu gehen für die Verwendung mit reagieren-Schleuder, ich habe es lokal und es lief gut. Der rest der Antworten müssen haben nicht gesehen, Ihr Kommentar, weil Sie noch konzentriert sich auf die sass-loader für webpack, die bereits eingerichtet ist, in Reaktion-Schleuder.

InformationsquelleAutor Zalaboza | 2016-08-28

  1. 23

    Zunächst einmal müssen Sie herunterladen richtigen loader für scss

    Install sass-loader

    npm install sass-loader --save-dev

    Dann müssen Sie Ihr webpack zu testen, alle scss-Dateien, damit es damit umgehen kann. Hier ist es, wie es gemacht wird

    {test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}

    , Wenn Sie Fehler in Bezug auf Knoten-sass

    Wenn Sie Fehler beheben können, Knoten-sass dann installieren

    npm i node-sass --save-dev

    Wenn Sie nun den import bootstrap.scss webpack bündeln wird es für Sie

    import "bootstrap/scss/bootstrap.scss"

    , Wie Sie es anpassen

    Beispiel im eigenen scss-Datei

    $btn-font-weight:bold;

    und importieren Sie dann die Komponente, die Sie möchten, zu überschreiben oder die ganze bootstrap.scss

    @import '~bootstrap/scss/bootstrap.scss';

    In meinem Fall Stil.scss

    $btn-font-weight:bold;
@import '~bootstrap/scss/bootstrap.scss';

    main.js

    import "bootstrap/scss/bootstrap.scss"
import "./style.scss"

    Hoffe, dies hilft Ihnen, Ihr Ziel zu erreichen!

    Habe ich eine demo-app hier

    laufen npm install
    und npm start
    bekam localhost:8080

    Ich weiß nicht, warum Sie importieren style.scss in beiden main.js und style.scss - Datei. Ich denke importieren auf style.scss arbeiten.
    Es ist nicht mehr erlaubt das weglassen der "- loader' - suffix bei der Verwendung von frontladern. Dies ist der richtige jetzt: { test: /\.scss$/, loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]}
    Was ist, wenn Sie nur Teile des Frameworks, wie das raster... ist das möglich?

    InformationsquelleAutor Jorawar Singh

  2. 9

    Scheint der Textvorschlag nicht sass-loader, und nicht suchen .scss - Dateien.

    Also erstmal off installieren npm i sass-loader --save

    Dann unter der Lader ein Teil in der webpack config sollten Sie etwas wie dieses:

    webpack.config.js

    var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
//this is the entire config object
const config = {
    //...
    loaders: [
        //...
        {
            test: /\.(css|scss)$/,
            include: [
                path.join(nodeModules, 'bootstrap'),
            ],
            loaders: ["style", "css", "sass"]
        }
    ]
    //...
};

    Nun, wenn Sie wollen spielen, um mit bootstrap ist .scss Variablen, die Sie tun können, so wie diese:

    styles/app.scss 

    $brand-warning: pink !default;
@import '~bootstrap/scss/bootstrap.scss';

    und in Ihrem main.js setzen im Stil importieren 

    import "styles/app.scss";

    Ich sollte auch erwähnen, das scheint mir sehr nah an diese Antwort

    InformationsquelleAutor Daniel Dubovski

  3. 8

    Nun, dass Sie eingeschaltet, um zu reagieren-Schleuder mit webpack, die bereits für sass-es gibt ein paar weniger Schritte. Von der raw-boilerplate, add bootstrap-4 mit npm als Sie schon getan hat:

    npm install bootstrap@4.0.0-alpha.3 --save

    Dann in src/styles/styles.scss, die Sie hinzufügen möchten, ein paar Importe

    @import "./bootstrap-custom";
@import "~bootstrap/scss/bootstrap";

    Dies ist im wesentlichen das gleiche wie @DanielDubovski Sie angezeigt wird, aber es ist ein etwas konventioneller haben eine separate Datei bootstrap überschreibt, und Sie brauchen keine Vorgabe mehr, denn du bist der Planung auf die übergeordnete bootstraps Standardeinstellungen, und Sie wahrscheinlich nicht wollen, um versehentlich überschreiben Ihre benutzerdefinierten bootstrap-Farben. Zum Einstieg in src/styles/bootstrap-custom.scss, können Sie in node_modules/bootstrap/scss/_variables.scss und sehen Sie eine vollständige Liste der Standard-Variablen. Sie können dann kopieren Sie den Variablen Namen, die Sie aktualisieren möchten. Hier ist ein Beispiel für die bootstrap-custom.scss, nur überschreibt der Graustufen-Farben:

    /*
 * overrides for bootstrap defaults, you can add more here as needed,    see node_modules/bootstrap/scss/_variables.scss for a complete list
 */

 $gray-dark:                 #333;
 $gray:                      #777;
 $gray-light:                #000;
 $gray-lighter:              #bbb;
 $gray-lightest:             #ddd;

    InformationsquelleAutor Ben Sidelinger

  4. 1
    npm install --save-dev sass-loader css-loader style-loader node-sass

    auf Ihre webpack.config.js:

     loaders: [
     {
         test: /\.scss$/,
         loaders: [ 'style', 'css', 'sass' ]
     }
 ]

    InformationsquelleAutor Jan Franz Palngipang

Schreibe einen Kommentar