Ember QuickTips: Hoe SASS / CSS-bestanden afzonderlijk op te splitsen en te importeren

Er zijn momenten waarop het wenselijk is om uw stylesheets op te splitsen in meerdere bestanden en deze afzonderlijk in uw project te importeren . Dit kwam naar voren in een bijproject dat ik onlangs ben begonnen, en ik dacht dat jullie allemaal baat zouden hebben bij wat ik als oplossing bedacht had. Het is een snelle en gemakkelijke methode, dus laten we beginnen?

Wanneer u een nieuwe EmberJS-app start, zult u merken dat het index.htmlbestand het hoofdstijlblad als volgt in de app importeert:

 ...  ... 

test-app.csswordt rechtstreeks vanuit uw project samengesteld. Wanneer we onze aangepaste stijlen app/styles/app.csserin schrijven, worden ze in dit bestand geplaatst.

Nu, wat als we niet al onze stijlen in de app willen importeren als een enkele stylesheet? Hoe kunnen we onze stijlen opsplitsen en meerdere stylesheets in de app importeren? Iets zoals dit:

 ...   ... 

Is het misschien makkelijker dan u denkt?

Stap één: schrijf stijlen in SCSS / SASS en compileer naar CSS

Installeer eerst een SASS-preprocessor om SCSS / SASS-stylesheets in CSS-stylesheets te compileren. Voor dit voorbeeld gebruik ik ember-cli-sass:

ember install ember-cli-sass

Hernoem nu app/styles/app.cssnaar app/styles/app.scss. De preprocessor zorgt voor het automatisch verwerken en samenstellen van uw stylesheet.

Als je de app gebruikt, zou de Ember-welkomstpagina zoals gewoonlijk moeten worden weergegeven:

Commentaar uit {{welcome-page}}in app/templates/application.hbsvoordat u verder gaat. We hebben nu een blanco DOM om mee te werken.

Stap twee: maak een nieuwe stylesheet

Laten we een nieuwe stylesheet maken met de naam app/styles/second-stylesheet.scssen de volgende stijlen toevoegen:

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

Een felrode achtergrond zou heel duidelijk zijn, maar als je de server draait, zie je niets anders dan een zee van wit. Waarom is dit?

Als je instinct was om het in het project te importeren zoals hierboven gespecificeerd, zou je gelijk hebben:

 ...  ... 

Toch verschijnt het nog steeds niet. Waarom? ? Dat komt omdat de build-pijplijn nog niet is geconfigureerd om dit bestand in de juiste map te bouwen.

Stap drie: configureer Ember-CLI-Build

De laatste stap is om de Ember-app te vertellen dat je een cssbestand wilt opnemen in de build-pijplijn.

In ember-cli-build.jsvoeg de volgende:

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

Dat is het! ? Dit vertelt Ember waar de nieuwe stylesheet moet worden uitgevoerd, zodat deze correct kan worden geopend in uw i ndex.html ?