Ембер КуицкТипс: Како раздвојити и увести САСС / ЦСС датотеке одвојено

Постоје тренуци када је пожељно да ваше табеле стилова раздвојите на више датотека и одвојено их увезете у пројекат . Ово се појавило у споредном пројекту који сам недавно започео и мислио сам да ћете можда имати користи од онога што сам смислио као решење. То је брза и лака метода, па да кренемо?

Када започнете нову апликацију ЕмберЈС, приметићете да index.htmlдатотека увози главни табелу стилова у апликацију тако:

 ...  ... 

test-app.cssје састављен директно из вашег пројекта. Када напишемо наше прилагођене стилове, app/styles/app.cssони се стављају у ову датотеку.

Сада, шта ако не желимо да увеземо све своје стилове у апликацију као једну табелу стилова? Како можемо разбити своје стилове и увести више табела стилова у апликацију? Овако нешто:

 ...   ... 

Можда је лакше него што мислите?

Први корак: Напишите стилове у СЦСС / САСС и компајлирајте у ЦСС

Прво инсталирајте САСС претпроцесор за компајлирање СЦСС / САСС табела стилова у ЦСС табеле стилова. За овај пример ћу користити ember-cli-sass:

ember install ember-cli-sass

Сада преименуј app/styles/app.cssу app/styles/app.scss. Претпроцесор ће се побринути за аутоматску обраду и састављање вашег листа стилова.

Ако покренете апликацију, Ембер страница добродошлице требало би да се прикаже као и обично:

Коментар од {{welcome-page}}у app/templates/application.hbsпре него што наставите. Сада имамо празан ДОМ за рад.

Други корак: Направите нову табелу стилова

Направимо нову листу стилова под називом app/styles/second-stylesheet.scssи додајте следеће стилове:

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

Блистава црвена позадина била би врло очигледна, али кад покренете сервер, не видите ништа осим мора белог. Зашто је ово?

Ако би ваш инстинкт био да га увезете у пројекат као што је горе наведено, били бисте у праву:

 ...  ... 

Ипак, још увек се не појављује. Зашто? ? То је зато што цевовод за изградњу још увек није конфигурисан за изградњу ове датотеке у исправној фасцикли.

Трећи корак: Конфигуришите Ембер-ЦЛИ-Буилд

Последњи корак је да апликацији Ембер кажете да имате 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' } } } }); ... };

То је то! ? Ово Емберу говори где да избаци вашу нову табелу стилова како би јој се могло правилно приступити у вашем и ndex.html ?