Instalar Bootstrap 4 + Sass en Vue

Instalar Bootstrap 4 + Sass en Vue
En este tutorial rápido aprenderemos como instalar Bootstrap y utilizar la linea de comandos de Vue para habilitar el soporte Sass para

Instalar Bootstrap 4 + Sass en Vue

En este tutorial rápido aprenderemos como instalar Bootstrap y utilizar la linea de comandos de Vue para habilitar el soporte Sass para aprovechar al máximo la configuración del framework. Unicamente vamos a utilizar los estilos de Bootstrap, no tocaremos temas como jQuery o librerías externas.

Comencemos instalando la linea de comandos de vue:

npm install -g @vue/cli

En caso de que ya tuvieras instalada en tu equipo la linea de comandos (muy bien por ti! 👏) te recomiendo que la reinstales para asegurarte que usas la versión mas reciente, en este ejemplo usaremos la versión 3.6.2, puedes encontrar la versión que usa tu ordenador con el comando:

vue --version

El siguiente paso es crear un nuevo proyecto Vue con el comando

vue create vue-bootstrap

Pero en este caso, en vez de usar la configuración por defecto, usaremos la opción manual para habilitar Sass, si no sabes como hacerlo, mira las opciones que debes elegir en la terminal:

Al finalizar el proceso, la linea de comandos de Vue ha configurado el soporte para Sass, a partir de ahora, se compilará y agregará al proyecto automáticamente.

Ahora vamos a instalar Bootstrap en este proyecto, para eso tenemos que ejecutar:

npm install bootstrap --save

Después de terminar la instalación tienes que buscar el punto de entrada de la aplicación, que en este caso seria el archivo App.vue, busca la sección style del documento e importa los estilos de Bootstrap asi:

<style lang="scss">
@import '../node_modules/bootstrap/scss/bootstrap.scss';
</style>

Si te fijas bien en esta etiqueta, estamos usando el atributo lang=”scss” para informarle al compilador de Vue que esa sección debe ser interpretada bajo la sintaxis de Sass, recuerda incluirla en todos tus componentes.

La mejor parte de usar Sass, ( ademas de que tienes un CSS optimizado gracias a la compilación) es que puedes aprovechar elementos extra como por ejemplo el concepto de variables!

Supongamos que quieres adaptar algunos colores para que se ajusten a la paleta cromática de tu cliente, puedes crear una subcarpeta llamada “styles” dentro de la carpeta “src” de tu proyecto y alli incluir un archivo con el nombre “custom.scss”.

En este archivo vamos a reescribir los valores variables de color y tipografías que usa bootstrap y gracias a que estamos compilando el CSS con Sass, estos valores se actualizarán en todo el documento

// importa tipografía desde google fonts
@import url("https://fonts.googleapis.com/css?family=PT+Sans");

// asigna la tipografía por defecto
$font-family-sans-serif: "PT Sans", sans-serif;

// modifica los colores por defecto
$green: #41b883;
$red: #ce679b;
$blue: #7952b3;

Y para que estos cambios sean visibles en la aplicación, tienes que importar el documento en en la sección style de app.vue

<style lang="scss">
   @import "./styles/custom.scss";
   @import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

Si quieres aprender más sobre las variables de configuración de Bootstrap, puedes darle una ojeada a la documentación

En este momento ya tienes Bootstrap con soporte Sass en tu aplicación, pero para poder apreciar los cambios, vamos a modificar el archivo App.vue para que su plantilla tenga un HTML con las clases que acabamos de importar, el resultado final del archivo debería ser este:

<template>
  <div id="app" class="container">
    <main role="main">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3">Bootstrap + Vue + Sass</h1>
          <p>
            <a
              class="btn btn-success btn-lg"
              href="http://vuejs.org"
              role="button"
            >Documentación Vue</a>
          </p>
          <p>
            <a
              class="btn btn-danger btn-lg"
              href="https://sass-lang.com"
              role="button"
            >Documentación Sass</a>
          </p>
          <p>
            <a
              class="btn btn-primary btn-lg"
              href="https://getbootstrap.com"
              role="button"
            >Documentación Bootstrap</a>
          </p>
        </div>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h2>Sección 1</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p>
              <a class="btn btn-secondary" href="#" role="button">Botón »</a>
            </p>
          </div>
          <div class="col-md-4">
            <h2>Sección 2</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p>
              <a class="btn btn-secondary" href="#" role="button">Botón »</a>
            </p>
          </div>
          <div class="col-md-4">
            <h2>Sección 3</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p>
              <a class="btn btn-secondary" href="#" role="button">Botón »</a>
            </p>
          </div>
        </div>

        <hr>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {}
};
</script>

<style lang="scss">
@import "./styles/custom.scss";
@import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

App.vue

Ahora, solo tienes que activar el servidor local de vue para ver el resultado usando

npm run serve

Si todo sale bien deberías ver este documento, con un layout responsivo basado en Bootstrap 4, si notas los colores de los botones, están usando la configuración personalizada y ahora se ajustan a la paleta oficial de cada framework usado

Si tienes algún problema para hacer funcionar tu proyecto, puedes usar como base este repositorio de github donde puse los archivos que usamos como ejemplo.

30s ad

Vue.js Essentials - 3 Course Bundle

Sıfırdan İleri Seviye Vue.JS Eğitimi ve Uygulama Geliştirme

Vue.js 2 Basics in just 1 hour FREE

Programador FullStack JS Vue Node: Proj Galeria Vídeo e CRUD

Learn by Doing: Vue JS 2.0 the Right Way

Suggest:

Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!

Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

Learn Vue.js from scratch 2018

React vs Vue - I Built the Same App in Both Frameworks

The Vue Tutorial for 2018 - Learn Vue 2 in 65 Minutes

Learn Vue 2 in 65 Minutes -The Vue Tutorial for 2018