Frage Richtige SCSS-Asset-Struktur in Rails


Also, ich habe eine app/assets/stylesheets/ Verzeichnisstruktur, die in etwa so aussieht:

   |-dialogs
   |-mixins
   |---buttons
   |---gradients
   |---vendor_support
   |---widgets
   |-pages
   |-structure
   |-ui_elements

In jedem Verzeichnis gibt es mehrere Sass-Teiltöne (normalerweise * .css.scss, aber ein oder zwei * .css.scss.erb).

Ich nehme vielleicht viel an, aber Rails SOLLTEN automatisch alle Dateien in diesen Verzeichnissen kompilieren *= require_tree . in application.css, oder?

Ich habe kürzlich versucht, diese Dateien zu restrukturieren, indem ich alle Farbvariablen lösche und sie in eine Datei im Stammverzeichnis lege app/assets/stylesheets Ordner (_colors.css.scss). Ich habe dann eine Datei im Root erstellt app/assets/stylesheets Ordner namens master.css.scss, der wie folgt 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 Schienen die Reihenfolge der Zusammenstellung von Assets handhaben, aber es ist offensichtlich nicht zu meinen Gunsten. Es scheint, dass keine der Dateien merkt, dass sie irgendwelche Variablen oder Mixins importiert haben, und so wirft sie Fehler und kann nicht kompiliert werden.

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 eindeutig in _colors.css.scss definiert, und _master.css.scss importiert Farben und alle meine Mixins. Aber anscheinend haben Schienen diese Notiz nicht bekommen.

Gibt es eine Möglichkeit, wie ich diese Fehler beheben kann, oder muss ich darauf zurückgreifen, all meine Variablendefinitionen in jede einzelne Datei zurückzuversetzen, sowie alle Mixin-Importe?

Unglücklicherweise, dieser Typ scheint nicht zu denken, dass es möglich ist, aber ich hoffe, dass er falsch liegt. Alle Gedanken werden sehr geschätzt.


76
2018-02-04 06:36


Ursprung


Antworten:


Das Problem mit CSS ist, dass Sie nicht automatisch alle Dateien hinzufügen möchten. Die Reihenfolge, in der Ihre Blätter vom Browser geladen und verarbeitet werden, ist wesentlich. So werden Sie immer am Ende alle Ihre CSS explizit importieren.

Nehmen wir als Beispiel an, Sie haben eine normalize.css Blatt, um ein Standard-Look statt aller schrecklichen verschiedenen Browser-Implementierungen zu bekommen. Dies sollte die erste Datei sein, die der Browser lädt. Wenn Sie dieses Blatt zufällig in Ihre css-Imports einfügen, wird es nicht nur die Standard-Stile des Browsers außer Kraft setzen, sondern auch alle Stile, die in allen zuvor geladenen CSS-Dateien definiert sind. Dies gilt auch für Variablen und Mixins.

Nach einer Präsentation von Roy Tomeij Auf der Euruko2012 habe ich mich für den folgenden Ansatz entschieden, wenn Sie viel CSS verwalten müssen.

Ich benutze im Allgemeinen diesen Ansatz:

  1. Benennen Sie alle vorhandenen .css-Dateien in .scss um
  2. Entfernen Sie alle Inhalte von application.scss

Fange an, @ import-Direktiven hinzuzufügen application.scss.

Wenn Sie einen twitter Bootstrap und ein paar eigene CSS-Blätter verwenden, müssen Sie zunächst den Bootstrap importieren, da er über ein Blatt verfügt, um Stile zurückzusetzen. Also fügst du hinzu @import "bootstrap/bootstrap.scss"; zu deinem application.scss.

Die Datei bootstrap.scss sieht folgendermaßen aus:

// CSS Reset
@import "reset.scss";

// Core
@import "variables.scss";
@import "mixins.scss";

// Grid system and page structure
@import "scaffolding.scss";

// Styled patterns and elements
@import "type.scss";
@import "forms.scss";
@import "tables.scss";
@import "patterns.scss";

Und dein application.scss Datei sieht wie folgt aus:

@import "bootstrap/bootstrap.scss";

Aufgrund der Reihenfolge der Importe können Sie nun die mit geladenen Variablen verwenden @import "variables.scss"; in jedem anderen .scss Datei wird danach importiert. So können sie verwendet werden type.scss im Bootstrap-Ordner aber auch in my_model.css.scss.

Danach erstellen Sie einen Ordner namens partials oder modules. Dies wird der Platz der meisten anderen Dateien sein. Sie können den Import einfach hinzufügen application.scss Datei so wird es aussehen:

@import "bootstrap/bootstrap.scss";
@import "partials/*";

Nun, wenn Sie ein bisschen CSS machen, um einen Artikel auf Ihrer Homepage zu stylen. Einfach erstellen partials/_article.scss und es wird dem kompilierten hinzugefügt application.css. Aufgrund der Import-Reihenfolge können Sie auch beliebige Bootstrap-Mixins und Variablen in Ihren eigenen scss-Dateien verwenden.

Der einzige Nachteil dieser Methode, den ich bisher gefunden habe, ist, dass man manchmal eine Neukompilierung der partiellen / * .ssss-Dateien erzwingen muss, weil Rails das nicht immer für Sie tun.


121
2018-02-12 08:38



Erstellen Sie die folgende Ordnerstruktur:

+ assets
|
--+ base
| |
| --+ mixins (with subfolders as noted in your question)
|
--+ styles
  |
  --+ ...

Im Ordner base Erstellen Sie eine Datei "globals.css.scss". Deklarieren Sie in dieser Datei alle Ihre Importe:

@import 'base/colors';
@import 'base/mixins/...';
@import 'base/mixins/...';

In Ihrer application.css.scss sollten Sie dann haben:

*= require_self
*= depends_on ./base/globals.css.scss
*= require_tree ./styles

Und als letzten Schritt (das ist wichtig), deklarieren @import 'base/globals' in jeder Style-Datei, 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. Es ist natürlich wichtig, dass Sie nur Mixins und Variablen in globals.css.scss importieren, da sie keine Stildefinitionen hinzufügen. Andernfalls würden die Stildefinitionen in Ihrer vorkompilierten Datei mehrfach enthalten sein ...


7
2018-02-08 09:55



Um Variablen und solche in Dateien zu verwenden, müssen Sie die @ import-Direktive verwenden. Dateien werden in der angegebenen Reihenfolge importiert.

Verwenden Sie dann application.css, um die Datei zu verlangen, die die Importe deklariert. So erreichen Sie die gewünschte Kontrolle.

Schließlich können Sie in Ihrer Datei layout.ERB angeben, welche CSS-Datei "master" verwendet werden soll

Beispiel wird hilfreicher sein:

Nehmen wir an, Sie haben zwei Module in Ihrer App, die verschiedene CSS-Sätze benötigen: "application" und "admin"

die Dateien

|-app/
|-- assets/
|--- stylesheets/
|     // the "master" files that will be called by the layout
|---- application.css
|---- application_admin.css
|
|     // the files that contain styles
|---- config.scss
|---- styles.scss
|---- admin_styles.scss
|
|     // the files that define the imports
|---- app_imports.scss
|---- admin_imports.scss
|
|
|-- views/
|--- layouts/
|---- admin.html.haml
|---- application.html.haml

Hier sehen Sie, wie die Dateien aussehen:

-------- THE STYLES

-- config.scss
// declare variables and mixins
$font-size: 20px;

--  app_imports.scss
// using imports lets you use variables from `config` in `styles`
@import 'config'
@import 'styles'

-- admin_imports.scss
// for admin module, we import an additional stylesheet
@import 'config'
@import 'styles'
@import 'admin_styles'

-- application.css
// in the master application file, we require the imports
*= require app_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self

-- application_admin.css
// in the master admin file, we require the admin imports
*= require admin_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self


-------- THE LAYOUTS

-- application.html.haml
// in the application layout, we call the master css file
= stylesheet_link_tag "application", media: "all"

--  admin.html.haml
// in the admin layout, we call the admin master css file
= stylesheet_link_tag "application_admin", media: "all"

6
2017-11-11 01:39



Gemäß diese Frage, Sie können NUR benutzen application.css.sass um den Import zu definieren und Variablen zwischen Ihren Vorlagen zu teilen.

=> Es scheint nur eine Frage des Namens zu sein.

Ein anderer Weg kann sein alles einschließen und diese Pipeline deaktivieren.


3
2018-02-08 08:13



Ich hatte ein sehr ähnliches Problem. Was mir geholfen hat, war, den Unterstrich auf die @ import-Anweisung zu setzen, wenn ich die partielle importiere. Damit

@import "_base";

Anstatt von

@import "base";

Es könnte ein seltsamer Bug sein ...


1
2018-03-13 08:20