Hay ocasiones en las que es deseable dividir las hojas de estilo en varios archivos e importarlas a su proyecto por separado . Esto surgió en un proyecto paralelo que comencé recientemente, y pensé que todos ustedes podrían beneficiarse de lo que se me ocurrió como solución. Es un método rápido y fácil, así que, ¿comencemos?
Cuando comience una nueva aplicación EmberJS, notará que el index.htmlarchivo importa la hoja de estilo principal a la aplicación así:
... ... test-app.cssse compila directamente desde su proyecto. Cuando escribimos nuestros estilos personalizados app/styles/app.css, se colocan en este archivo.
Ahora, ¿qué pasa si no queremos importar todos nuestros estilos a la aplicación como una sola hoja de estilo? ¿Cómo podemos dividir nuestros estilos e importar varias hojas de estilo a la aplicación? Algo como esto:
... ... Puede ser mas sencillo de lo que imaginas ?
Paso uno: escriba estilos en SCSS / SASS y compile en CSS
Primero, instale un preprocesador SASS para compilar hojas de estilo SCSS / SASS en hojas de estilo CSS. Para este ejemplo usaré ember-cli-sass:
ember install ember-cli-sassAhora cambie el nombre app/styles/app.cssa app/styles/app.scss. El preprocesador se encargará de procesar y compilar su hoja de estilo automáticamente.
Si ejecuta la aplicación, la página de bienvenida de Ember debería mostrarse como de costumbre:
Comentar {{welcome-page}}en app/templates/application.hbsantes de continuar. Ahora tenemos un DOM en blanco para trabajar.
Paso dos: cree una nueva hoja de estilo
Creemos una nueva hoja de estilo llamada app/styles/second-stylesheet.scssy agreguemos los siguientes estilos:
body { width: 100vw; height: 100vh; background-color: red; }Un fondo rojo deslumbrante sería muy obvio, pero cuando ejecuta el servidor no ve nada más que un mar blanco. ¿Por qué es esto?
Si su instinto fuera importarlo al proyecto como se especificó anteriormente, estaría en lo correcto:
... ... Sin embargo, todavía no aparece. ¿Por qué? ? Esto se debe a que la canalización de compilación aún no se ha configurado para compilar este archivo en la carpeta correcta.
Paso tres: configurar Ember-CLI-Build
El último paso es decirle a la aplicación Ember que tiene un cssarchivo para incluir en su canal de compilación.
En ember-cli-build.jsañada la siguiente:
... module.exports = function(defaults) { let app = new EmberApp(defaults, { // Add options here outputPaths: { app: { css: { 'second-stylesheet': '/assets/second-stylesheet.css' } } } }); ... };¡Eso es! ? Esto le dice a Ember dónde generar su nueva hoja de estilo para que se pueda acceder a ella correctamente en su i ndex.html ?
