Ember QuickTips: Hogyan lehet külön-külön feldarabolni és importálni a SASS / CSS fájlokat

Van, amikor kívánatos a stíluslapokat több fájlra bontani, és külön importálni a projektbe . Ez egy nemrégiben elindított mellékprojektben merült fel, és úgy gondoltam, hogy hasznát veheti az, amit megoldással találtam ki. Ez egy gyors és egyszerű módszer, tehát kezdjük?

Amikor új EmberJS alkalmazást indít, észreveszi, hogy a index.htmlfájl a fő stíluslapot importálja az alkalmazásba, így:

 ...  ... 

test-app.cssközvetlenül a projektből áll össze. Amikor beírjuk az egyéni stílusainkat, app/styles/app.cssakkor ebbe a fájlba kerülnek.

És mi van akkor, ha nem szeretnénk az összes stílusunkat egyetlen stíluslapként importálni az alkalmazásba? Hogyan bonthatjuk fel a stílusainkat és importálhatunk több stíluslapot az alkalmazásba? Valami ilyesmi:

 ...   ... 

Lehet, hogy könnyebb, mint gondolnád?

Első lépés: Írjon stílusokat SCSS / SASS-ba és fordítson CSS-be

Először telepítsen egy SASS előfeldolgozót az SCSS / SASS stíluslapok CSS stíluslapokba fordításához. Ebben a példában a következőket fogom használni ember-cli-sass:

ember install ember-cli-sass

Most átnevezni app/styles/app.cssa app/styles/app.scss. Az előfeldolgozó gondoskodik a stíluslap automatikus feldolgozásáról és összeállításáról.

Ha futtatja az alkalmazást, az Ember üdvözlő oldalának a szokásos módon kell megjelennie:

Megjegyzés ki {{welcome-page}}a app/templates/application.hbsfolytatás előtt. Most egy üres DOM-mal dolgozhatunk.

Második lépés: Hozzon létre egy új stíluslapot

Hozzunk létre egy új stíluslapot, app/styles/second-stylesheet.scssés nevezzük a következő stílusokat:

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

A szembetűnő vörös háttér nagyon nyilvánvaló lenne, de a szerver futtatásakor nem lát semmit, csak a fehér tenger. Miért ez?

Ha az ösztönöd a fentiek szerint importálná a projektbe, akkor helyesen tennéd:

 ...  ... 

Még mindig nem jelenik meg. Miért? ? Ez azért van, mert a build folyamat még nem volt konfigurálva, hogy ezt a fájlt a megfelelő mappába építse.

Harmadik lépés: Az Ember-CLI-Build konfigurálása

Az utolsó lépés az, hogy elmondja az Ember alkalmazásnak, hogy van egy cssfájlja , amelyet fel kell venni az építési folyamatába.

Az alábbiak ember-cli-build.jshozzáadásával:

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

Ez az! ? Ez megmondja Embernek, hogy hol adja ki az új stíluslapot, hogy az megfelelően hozzáférhető legyen az i-ben ndex.html ?