Ember QuickTips: Kuinka hajottaa ja tuoda SASS / CSS-tiedostot erikseen

Toisinaan on suositeltavaa jakaa tyylitaulukot useiksi tiedostoiksi ja tuoda ne projektiisi erikseen . Tämä tuli esiin sivuprojektissa, jonka aloitin äskettäin, ja ajattelin, että kaikki hyötyvät ratkaisusta, jonka keksin. Se on nopea ja helppo menetelmä, joten aloitetaan?

Kun aloitat uuden EmberJS-sovelluksen, huomaat, että index.htmltiedosto tuo päätyylitaulukon sovellukseen näin:

 ...  ... 

test-app.csson koottu suoraan projektistasi. Kun kirjoitamme mukautetut tyylimme, app/styles/app.cssne laitetaan tähän tiedostoon.

Entä jos emme halua tuoda kaikkia tyylejämme sovellukseen yhtenä tyylitaulukkona? Kuinka voimme hajottaa tyylimme ja tuoda useita tyylitaulukoita sovellukseen? Jotain tällaista:

 ...   ... 

Se voi olla helpompaa kuin luulet?

Vaihe yksi: Kirjoita tyylit SCSS / SASS: iin ja käännä CSS: ksi

Asenna ensin SASS-esiprosessori kääntääksesi SCSS / SASS-tyylitaulukot CSS-tyylitaulukoihin. Tässä esimerkissä käytän ember-cli-sass:

ember install ember-cli-sass

Nyt nimetä app/styles/app.csson app/styles/app.scss. Esiprosessori huolehtii tyylitaulukon käsittelystä ja kokoamisesta automaattisesti.

Jos käytät sovellusta, Emberin tervetulosivun pitäisi näkyä tavalliseen tapaan:

Kommentoi {{welcome-page}}sisään, app/templates/application.hbsennen kuin jatkat. Meillä on nyt tyhjä DOM työskennellä.

Toinen vaihe: Luo uusi tyylitaulukko

Luodaan uusi tyylitaulukko nimeltä app/styles/second-stylesheet.scssja lisätään seuraavat tyylit:

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

Häikäisevä punainen tausta olisi hyvin ilmeinen, mutta kun suoritat palvelinta, näet vain valkoisen meren. Miksi tämä on?

Jos vaistonne olisi tuoda se projektiin yllä määritetyllä tavalla, olisit oikeassa:

 ...  ... 

Silti se ei vieläkään näy. Miksi? ? Tämä johtuu siitä, että koontiputkistoa ei ole vielä määritetty rakentamaan tätä tiedostoa oikeaan kansioon.

Kolmas vaihe: Määritä Ember-CLI-koontiversio

Viimeinen vaihe on kertoa Ember-sovellukselle, että sinulla on csstiedosto, joka sisällytetään sen rakenneputkeen.

Vuonna ember-cli-build.jslisätään seuraavaa:

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

Se siitä! ? Tämä kertoo Emberille, mistä uusi tyylitaulukko tulostetaan, jotta sitä voidaan käyttää oikein i-laitteellasi ndex.html ?