Ember QuickTips: Πώς να χωρίσετε και να εισαγάγετε αρχεία SASS / CSS ξεχωριστά

Υπάρχουν στιγμές που είναι επιθυμητό να χωρίσετε τα φύλλα στυλ σας σε πολλά αρχεία και να τα εισαγάγετε στο έργο σας ξεχωριστά . Αυτό βγήκε σε ένα δευτερεύον έργο που ξεκίνησα πρόσφατα και νόμιζα ότι θα μπορούσατε να επωφεληθείτε από αυτό που βρήκα ως λύση. Είναι μια γρήγορη και εύκολη μέθοδος, οπότε ας ξεκινήσουμε;

Όταν ξεκινάτε μια νέα εφαρμογή EmberJS, θα παρατηρήσετε ότι το index.htmlαρχείο εισάγει το κύριο φύλλο στυλ στην εφαρμογή ως εξής:

 ...  ... 

test-app.cssκαταρτίζεται απευθείας από το έργο σας. Όταν γράφουμε τα προσαρμοσμένα στυλ μας app/styles/app.css, μπαίνουν σε αυτό το αρχείο.

Τώρα, τι γίνεται αν δεν θέλουμε να εισαγάγουμε όλα τα στυλ μας στην εφαρμογή ως ένα ενιαίο φύλλο στυλ; Πώς μπορούμε να χωρίσουμε τα στυλ μας και να εισαγάγουμε πολλά φύλλα στυλ στην εφαρμογή; Κάτι σαν αυτό:

 ...   ... 

Μπορεί να είναι πιο εύκολο από όσο νομίζετε;

Βήμα πρώτο: Γράψτε στυλ σε SCSS / SASS και μεταγλώττιση σε CSS

Αρχικά, εγκαταστήστε έναν προεπεξεργαστή SASS για να μεταγλωττίσετε φύλλα στυλ SCSS / SASS σε φύλλα στυλ CSS. Για αυτό το παράδειγμα θα χρησιμοποιήσω ember-cli-sass:

ember install ember-cli-sass

Τώρα μετονομάστε app/styles/app.cssσε app/styles/app.scss. Ο προεπεξεργαστής θα φροντίσει να επεξεργαστεί και να συντάξει αυτόματα το φύλλο στυλ σας.

Εάν εκτελέσετε την εφαρμογή, η σελίδα καλωσορίσματος του Ember θα πρέπει να εμφανίζεται ως συνήθως:

Σχόλιο από {{welcome-page}}το app/templates/application.hbsπριν να συνεχίσετε. Έχουμε τώρα ένα κενό DOM για να εργαστούμε.

Βήμα δεύτερο: Δημιουργήστε ένα νέο φύλλο στυλ

Ας δημιουργήσουμε ένα νέο φύλλο στυλ που ονομάζεται app/styles/second-stylesheet.scssκαι προσθέστε τα ακόλουθα στυλ:

body { width: 100vw; height: 100vh; background-color: red; }

Ένα έντονο κόκκινο φόντο θα ήταν πολύ προφανές, αλλά όταν εκτελείτε το διακομιστή δεν βλέπετε τίποτα άλλο από μια λευκή θάλασσα Γιατί είναι αυτό?

Εάν το ένστικτό σας ήταν να το εισαγάγετε στο έργο όπως ορίζεται παραπάνω, θα έχετε δίκιο:

 ...  ... 

Ωστόσο, εξακολουθεί να μην εμφανίζεται. Γιατί; ; Αυτό οφείλεται στο γεγονός ότι ο αγωγός build δεν έχει ρυθμιστεί ώστε να δημιουργεί αυτό το αρχείο στον σωστό φάκελο ακόμη.

Βήμα τρίτο: Ρυθμίστε το Ember-CLI-Build

Το τελευταίο βήμα είναι να πείτε στην εφαρμογή Ember ότι έχετε ένα cssαρχείο που θα συμπεριλάβετε στον αγωγό κατασκευής του.

Στην ember-cli-build.jsπροσθέστε την ακόλουθη:

... module.exports = function(defaults) { let app = new EmberApp(defaults, { // Add options here outputPaths: { app: { css: { 'second-stylesheet': '/assets/second-stylesheet.css' } } } }); ... };

Αυτό είναι! ; Αυτό λέει στον Ember πού να εξάγει το νέο φύλλο στυλ, ώστε να μπορεί να έχει σωστή πρόσβαση στο i ndex.html ;