Ich habe also eine app/assets/stylesheets/
Verzeichnisstruktur, die ungefähr so aussieht:
|-dialogs
|-mixins
|---buttons
|---gradients
|---vendor_support
|---widgets
|-pages
|-structure
|-ui_elements
In jedem Verzeichnis gibt es mehrere Sass-Partials (normalerweise * .css.scss, aber ein oder zwei * .css.scss.erb).
Ich gehe vielleicht von viel aus, aber Rails MÜSSEN aufgrund von *= require_tree .
application.css automatisch alle Dateien in diesen Verzeichnissen kompilieren , oder?
Ich habe kürzlich versucht, diese Dateien neu zu strukturieren, indem ich alle Farbvariablen entfernt und in einer Datei im app/assets/stylesheets
Stammordner (_colors.css.scss) abgelegt habe. Ich habe dann eine Datei im app/assets/stylesheets
Stammordner namens master.css.scss erstellt, die folgendermaßen aussieht:
// Color Palette
@import "colors";
// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";
Ich verstehe nicht wirklich, wie Rails die Reihenfolge der Asset-Kompilierung handhabt, aber es ist offensichtlich nicht zu meinen Gunsten. Es scheint, dass keine der Dateien erkennt, dass Variablen oder Mixins importiert werden. Daher werden Fehler ausgegeben, und ich kann nicht kompilieren.
Undefined variable: "$dialog_divider_color".
(in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)
Undefined mixin 'rounded_corners'.
(in /home/blah/app/assets/stylesheets/widgets.css.scss)
Die Variable $dialog_divider_color
ist in _colors.css.scss klar definiert und _master.css.scss
importiert Farben und alle meine Mixins. Aber anscheinend haben Rails dieses Memo nicht bekommen.
Gibt es eine Möglichkeit, diese Fehler zu beheben, oder muss ich alle meine Variablendefinitionen sowie alle Mixin-Importe wieder in jede einzelne Datei einfügen?
Leider scheint dieser Typ nicht zu glauben, dass es möglich ist, aber ich hoffe, er liegt falsch. Alle Gedanken werden sehr geschätzt.
quelle
application.css
und benennst es um inapplication.scss
. Weil esrequire_tree
einfach alles enthält und Sie normalerweise die Reihenfolge kontrollieren möchtenUm Variablen und dergleichen dateiübergreifend zu verwenden, müssen Sie die @ import-Direktive verwenden. Dateien werden in der angegebenen Reihenfolge importiert.
Verwenden Sie dann application.css, um die Datei anzufordern, die die Importe deklariert. Auf diese Weise erreichen Sie die gewünschte Kontrolle.
Schließlich können Sie in Ihrer Datei layout.erb angeben, welche CSS-Masterdatei verwendet werden soll
Beispiel wird hilfreicher sein:
Angenommen, Ihre App enthält zwei Module, die unterschiedliche CSS-Sätze benötigen: "application" und "admin".
die Dateien
So sehen die Dateien im Inneren aus:
quelle
Erstellen Sie die folgende Ordnerstruktur:
base
Erstellen Sie im Ordner eine Datei "globals.css.scss". Deklarieren Sie in dieser Datei alle Ihre Importe:In Ihrer application.css.scss sollten Sie dann haben:
Und als letzten Schritt (dies ist wichtig) deklarieren Sie
@import 'base/globals'
in jeder Stildatei, in der Sie Variablen oder Mixins verwenden möchten. Sie könnten diesen Aufwand in Betracht ziehen, aber ich mag die Idee, dass Sie die Abhängigkeiten Ihrer Stile in jeder Datei deklarieren müssen. Natürlich ist es wichtig, dass Sie nur Mixins und Variablen in die Datei globals.css.scss importieren, da diese keine Stildefinitionen hinzufügen. Andernfalls würden die Stildefinitionen mehrmals in Ihre vorkompilierte Datei aufgenommen ...quelle
Entsprechend dieser Frage können Sie NUR verwenden
application.css.sass
, um Import- und Freigabevariablen zwischen Ihren Vorlagen zu definieren.=> Es scheint nur eine Frage des Namens zu sein.
Eine andere Möglichkeit kann darin bestehen, alles einzuschließen und diese Pipeline zu deaktivieren .
quelle
Ich hatte ein sehr ähnliches Problem. Was mir geholfen hat, war, beim Importieren des Teils den Unterstrich in die @ import-Anweisung einzufügen. So
anstatt
Es könnte ein seltsamer Fehler sein ...
quelle