CursosEmpresasBlogLiveConfPrecios

Configuración de Sass y Bulma en Vue

Clase 8 de 53 • Curso Profesional de Vue.js 2

Resumen

Configura Sass y Bulma en Vue de forma segura y clara. Aquí verás cómo aprovechar la preconfiguración del CLI, importar estilos globales en app.vue y sumar un framework CSS moderno que usa flexbox para un diseño responsivo.

¿Cómo configurar Sass en Vue con webpack?

La app generada con el CLI ya trae los loader de Sass listos en webpack. No hace falta instalar nada extra para compilar .scss.

  • Crea la carpeta src/scss/.
  • Añade el archivo main.scss.
  • Recuerda: Sass es un preprocesador que acelera tu CSS, permite reutilizar código, usar variables y hasta condiciones.

Ejemplo rápido para comprobar que compila:

/* src/scss/main.scss */
html {
  color: red;
}
/* Puedes probar también: */
/* body { background: black; } */

Al guardar, la app se recompila automáticamente y verás los cambios en el navegador.

¿Qué aporta un preprocesador como Sass?

  • Escritura más programática de CSS.
  • Optimización y reutilización de reglas.
  • Soporte de variables y condiciones.

¿Cómo organizar los estilos globales y por componente?

  • Mantén un archivo global mínimo (main.scss).
  • Define la mayoría de estilos dentro de cada componente para aislar y escalar.

¿Cómo importar estilos globales en app.vue?

La buena práctica es importar el main.scss en el componente raíz (App.vue). Usa la sintaxis de Sass con @import dentro del bloque <style>.

<!-- App.vue -->
<template>
  <div id="app">Hola Vue</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
@import './scss/main.scss';
</style>
  • Es un @import de Sass, no de ES Modules. No los confundas.
  • Con esto, cualquier cambio en main.scss se refleja al instante.

¿Qué verificar tras la importación?

  • Que el estilo de prueba (por ejemplo, html { color: red; }) se aplique.
  • Que al quitar los estilos de prueba, todo vuelva a la normalidad y el archivo quede listo.

¿Cómo instalar e integrar Bulma con npm y Sass?

Bulma es un framework de CSS sencillo que no requiere jQuery y usa flexbox para crear grillas responsivas.

Instalación como dependencia de producción:

npm i -S bulma
  • Se usa -S en lugar de -D porque se necesita en producción.
  • Lo instalado queda en node_modules/.

Importa Bulma en tu main.scss usando @import y la ruta relativa a node_modules (dos niveles arriba si estás en src/scss/):

/* src/scss/main.scss */
@import "../../node_modules/Bulma/Bulma.sass";
  • Ruta: ../../ para subir a src/ y al raíz del proyecto, luego node_modules/.
  • Archivo: Bulma.sass dentro del directorio Bulma instalado.

Tras importar, notarás cambios en la tipografía: es señal de que Bulma quedó integrado y ya puedes usar sus clases y utilidades CSS.

¿Qué validar después de integrar Bulma?

  • Que el paquete aparece en node_modules/.
  • Que el estilo base del sitio cambió (fuentes, normalización).
  • Que puedes componer grillas con flexbox usando las clases de Bulma.

¿Tienes dudas sobre la ruta de importación o la organización de estilos con Sass y Bulma en Vue? Cuéntame tu caso y te ayudo a ajustarlo.

      Configuración de Sass y Bulma en Vue