2017-04-20 42 views
6

mam przepisywanie „starą” React prototyp, który używa Bourbon, ale również wykorzystuje haustem-Sass w gulpfile wstrzyknąć zależność węzła-schludny:create-react-app (bez wyrzucania) + bourbon/schludny?

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

Chciałbym użyć create-react-app i ustaw "prosty" obieg pracy dla stylów, używając skryptu npm do kompilowania plików sass (również dlatego, że aplikacja create-re- app-app ogranicza to), ale nie mogę wymyślić, jak to zrobić.

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

Pewnie przepisać stylów w przyszłości za pomocą innego podejścia (może używać stylizowanych elementów, może nadal korzystać Sass i odwoływania Bourbon całkowicie), ale po prostu trzeba portu style Sass od starego projekt na razie.

Jakieś pomysły na integrację kreacji-reakcji-aplikacji (bez wyrzucania) i Bourbon/Neat?

Czy istnieje sposób, aby na przykład wstawić bit neat.includePaths do skryptu one-liner node-sass w package.json?

+0

Drobne uwagi boczne, ale prawdopodobnie powinieneś zamienić 'węzeł-czysty' na' burbon-czysty '. 'node-schludny'jest portem i zwykle znajduje się za oficjalną wersją. https://www.npmjs.com/package/bourbon-neat – whmii

+0

wielkie dzięki. każda pomoc jest bardzo doceniana. – zok

+1

Najlepszym wyjściem jest sprawdzenie dokumentacji narzędzia NPM na stronie https://github.com/thoughtbot/neat#installing-with-npm-and-using-a-node- based-pipeline Alternatywnie możesz wypróbować http://eyeglass.rocks/ jako sposób obsługi twojego sass i zależności. Niestety reakcja jest dość poza moją sterówką, więc to najlepsza rada, jaką mogę dać. – whmii

Odpowiedz

0

Z tego co wiem, nie można ocenić includePaths, aby móc zaimportować Bourbona i Neat za pomocą jednej linijki w package.json.

Możesz jednak nadal używać programu Bourbon + Neat z niewypuszczoną aplikacją React. Jeśli zachowasz swoje zmiany package.json zgodnie z opisem w React here, zainstaluj klejnoty na swoim komputerze i zainstaluj je lokalnie w swoich katalogach Sass, jeśli uznasz to za stosowne. Jako przykład;

  • /src
    • /style
      • /sprzedawców
        • /bourbon
        • /schludny
        • /inna-Sass-biblioteka
      • /baza
      • /układ
      • /...
    • App.js
    • ...

Po zainstalowaniu kamienie, uruchomienie komendy gdzie chcesz je zainstalować. bourbon install --path <some-path> i neat install.

Kiedy można odwołać Bourbon i schludny w ten sposób, to nie ma problemu po prostu @import vendors/bourbon/bourbon itp

Oczywiście, ten sposób zarządzania style nie są na równi z współ-położony, moduł myślenia React/WebPACK , ale czasami jest zdecydowanie potrzeba w pełni kontrolowanego drzewa stylów Sass.