2017-04-20 2 views
6

Ich bin ein „altes“ Prototyp Umschreiben reagieren, die Bourbon verwendet, verwendet es auch schluck-sass in einem gulpfile eine Knoten ordentlich Abhängigkeit zu injizieren:create-react-app (ohne auswerfen) + Bourbon/ordentlich?

var sassOptions = { includePaths: require('node-neat').includePaths, };

Ich möchte die create-react-app verwenden bastleplate und habe einen "einfachen" Workflow für die Stile, indem du ein npm-Skript verwendest, um die sass-Dateien zu kompilieren (auch weil create-react-app dich darauf beschränkt), aber ich kann nicht herausfinden, wie das geht.

"build-css": "node-sass src/styles/ -o src/", "watch-css": "npm run build-css && node-sass src/styles/ -o src/ --watch --recursive"

Ich werde wahrscheinlich die Stile in der Zukunft mit einem anderen Ansatz neu zu schreiben (vielleicht vielleicht gestylt Komponenten verwenden, halten Sass mit und entlassen Bourbon ganz), aber ich brauche nur in den Hafen der Sass Stile von der alten Projekt für jetzt.

Irgendwelche Ideen zur Integration von create-react-app (ohne Auswerfen) und Bourbon/Neat?

Gibt es eine Möglichkeit, das "adrett.includePaths" -Bit in das node-sass-Einzeiler-Skript in package.json zu übernehmen?

+0

Kleine Randnotiz, aber Sie sollten wahrscheinlich "Knoten-ordentlich" für "Bourbon-ordentlich" auslagern. 'node-adrett' ist ein Port und neigt dazu, hinter der offiziellen Version zu sein. https://www.npmjs.com/package/bourbon-neat – whmii

+0

vielen Dank Mann. jede Hilfe wird sehr geschätzt. – zok

+1

Ihre beste Wette ist, um zu überprüfenNeat NPM Dokumentation unter https://github.com/thoughtbot/neat#installing-with-npm-and-using-a-node-based-asset-pipeline Als Alternative können Sie wollen http://eyeglass.rocks/ als eine Möglichkeit, Ihre Hass und Abhängigkeiten zu behandeln. Leider ist Reagieren ziemlich außerhalb meines Steuerhauses, also ist das der beste Rat, den ich geben kann. – whmii

Antwort

0

Soweit ich weiß, können Sie nicht die includePaths bewerten Sie müssen in der Lage sein, Bourbon und Ordentlich durch die Einzeiler in package.json importieren.

Sie können jedoch weiterhin Bourbon + Neat mit Ihrer nicht ausgeworfenen React App verwenden. Wenn Sie Ihre package.json Änderungen wie von React here beschrieben ändern, installieren Sie die Edelsteine ​​auf Ihrem Rechner und installieren Sie sie lokal in Ihren Sass-Verzeichnissen, wo Sie es für richtig halten. Als Beispiel;

  • /src
    • /styles
      • /Anbieter
        • /Bourbon
        • /ordentlich
        • /other-Sass-Bibliothek
      • /base
      • /Layout
      • /...
    • App.js
    • ...

Wenn die Edelsteine ​​installiert haben, führen Sie die Befehle wo Sie sie installieren möchten. bourbon install --path <some-path> und neat install.

Wenn Sie Bourbon und Ordentlich auf diese Weise verweisen können, ist es kein Problem, einfach @import vendors/bourbon/bourbon usw.

Natürlich ist diese Art und Weise Arten der Verwaltung sind nicht auf einer Stufe mit dem co-located, Modul Denken Reagieren/Webpack , aber manchmal gibt es definitiv einen Bedarf für einen vollständig kontrollierten Sass-Styles-Baum.

Verwandte Themen