Instalando bootstrap sass en AureliaJS

Y continuamos... esta vez agregaremos bootstrap sass a un proyecto iniciado con la cli de aurelia.

El primer paso es instalar bootstrap sass y jquery en el proyecto:

$ npm install bootstrap-sass --save
$ npm install jquery --save

Recordar que la opción --save, simplemente guardara esta librería en el archivo package json para que luego pueda instalarse facilmente con npm install.

Ahora, modificaremos el archivo aurelia.json, agregando las siguientes líneas en dependencies para que el buider de Aurelia reconozca a bootstrap y lo cargue. Es necesario que jquery este cargado primero para poder utilizar bootstrap, así que agregamos ambos.

     "jquery",
     {
       "name": "bootstrap",
       "path": "../node_modules/bootstrap-sass/assets/javascripts",
       "main": "bootstrap",
       "deps": ["jquery"],
       "exports": "$"
     }

Ahora creamos una carpeta assets (puede ser cualquier otro nombre) dentro de src, y creamos el archivo main.scss (recordar la convención de sass, cuando el nombre comienza con _ es un partial y no genera css!!!).

El el archivo de estilos simplemente agregamos la siguiente línea para asegurarnos que se esta compilando el archivo sass como css.

h1 {
  background-color: red;
}

Además, modificaremos el archivo src/app.html para asegurarnos que los estilos que aplicamos esten modificando los elementos que necesitamos. Agregaremos un pequeño formulario de bootstrap con el siguiente código:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-offset-3 col-sm-offset-3 col-md-offset-3
            col-lg-offset-3 col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <h1>${message}</h1>
        <form action="" method="post" role="form">
          <legend>Form Title</legend>

          <div class="form-group">
            <label for="">Ejemplo</label>
            <input type="text" class="form-control" placeholder="Si">
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</template>

Comenzamos la aplicación para ver si todo esta correcto con:

$ au run --watch

Con este comando debería poder verse la aplicación en 127.0.0.1:9000

Hola Mundo sin estilos :(

¿Qué ocurrió? El formulario se puede ver, pero no se aplicaron los estilos ni de nuestro archivo sass ni de bootstrap, malas noticias...

El problema es que aún no importamos el archivo sass que creamos a la página, para hacerlo modificamos nuevamente el archivo src/app.html y le agregamos la hoja de estilos con el tag require de la siguiente manera:

<template>
  <require from="./assets/main.css"></require>
  <div class="container">

Ahora la pantalla de inicio debería mostrarnos un fondo rojo en el tag h1.

Ehhhh ya se ve el cambio

Sin embargo aún no vemos los cambios en el formulario bootstrap, así que importaremos las hojas de estilo de bootstrap desde nuestro archivo sass (probaremos esta función porque cuando comence a utilizar SASS no se podía importar de distintos directorios, aunque si se podía hacerlo desde subdirectorios). Importar los estilo desde otro archivo sass es simplemente una forma de realizar esta operación, tambien se puede modificar los sources para que la tarea de gulp-sass genere el css automaticamente.

Ahora a lo nuestro, importemos las hojas de estilo de bootstrap en el archivo :

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

h1 {
  background-color: red;
}

Deberiamos poder observar los cambios de inmediato

Aurelia con bootstrap-sass

Y esta hecho, super simple, ya podemos utilizar sass (en este caso bootstrap-sass también) en nuestro proyecto con Aurelia. En los siguientes blogs comenzaremos a crear elementos y otras cosillas útiles, keep coding >_<