Teilen Sie ein Stylus-Blatt zwischen Paketen

Question

Ich habe eine App in eine Handvoll Pakete gebrochen. Jedes dieser Pakete hat sein eigenes .styl-Blatt, um die Komponenten zu formatieren, die das spezifische Paket anbietet. Derzeit basieren diese Stylesheets alle auf den gleichen Funktionen, Mixins und Variablen, die in der variables.import.styl im Ordner ./client/styles deklariert sind. Ich tue das, weil, wenn ich die errorRed Farbe in variables.import.styl ändere, es die Farbe über alle Pakete ändert.

Um Zugriff auf diese Variablen, am Anfang des Stylesheet jedes Pakets, habe ich eine @import "./client/styles/variables.import". Alternativ könnte ich ein separates Paket für die Stylus-Vars erstellen & dann machen Sie das Paket eine Abhängigkeit in allen anderen Paketen. Ich mag beide Optionen nicht, aber ich denke, es ist der Preis, den ich bezahle, um Stylesheets nach Paket getrennt zu halten. Hat jemand eine elegantere Alternative?

Es ist erwähnenswert, dass auf meinem Zweig Meteor devel meine bisherige Lösung nicht mehr funktioniert (Stift kann den Ordner über dem Paketstamm nicht sehen). Unabhängig davon, ob dies vor der nächsten Version behoben wurde oder nicht, weiß ich, dass es eine sauberere Lösung geben muss.

Answer 1

Ab Meteor 1.2 ist dies jetzt eine Funktion, die sowohl für Stylus als auch für weniger Stylesheets funktioniert.

https://github.com/meteor/meteor/tree/devel/packages/stylus#cross-packages-imports

In Ihrem package.jsPackage.onUse Abschnitt verwenden api.addFiles Griffel Blätter von diesem Paket zur Verfügung gestellt zu erklären:

api.addFiles('styles/package-sheet.styl', 'client', {isImport: true}); 

Beachten Sie die Option isImport: true?

Dann in Ihrem Haupt-App Master Stylus Sheet Sie ein bestimmtes Paket importieren können (sie my-username:mypackage genannt es annimmt) Blatt mit folgenden Syntax:

@import '{my-username:my-package}/styles/package-sheet.styl' 

Beachten Sie, dass Sie auch Blätter in Ihrer App für den Import müssen Verwenden Sie diese neue Syntax ohne Paketnamen:

Die vorherige Syntax wird nicht länger funktionieren!

// the Meteor build tool will complain about not finding the sheet 
@import 'client/styles/app-sheet.styl'