Configurar sass en proyecto Vue 3: tutorial paso a paso ????????

Bien, esto es algo que experimentamos todos en algún momento: estás ahí, trabajando en el código, y de repente te encuentras con esa área que a muchos les resulta tediosa, considerada por muchos como la parte más compleja y laboriosa de la programación. Y no, no estoy hablando de aprender un nuevo lenguaje de programación de principio a fin, sino de ese desafío llamado CSS.

Aunque no te voy a dar la clave para evitarlo, sí tengo algunos consejos sobre la sintaxis que pueden hacer que estas luchas sean más llevaderas. De verdad, creo que con lo que estás a punto de leer o aplicar (espero que sí personalmente), puedes cambiar la perspectiva de tus proyectos, al menos en cuanto a css jaja.

Para empezar, vamos a iniciar un proyecto desde cero, así que ve a tu terminal y escribirás lo siguiente

npm create vue@latest
terminal

Aquí te comparto la configuración con la que comencé el proyecto

terminal

Ahora escribirás esos comandos en verde para dirigirte al proyecto en la terminal, instalar dependencias y ejecutar el proyecto localmente, es decir, en nuestra computadora.

cd sass-in-vue3/ && npm i && npm run dev
terminal

Después de haber ejecutado los comandos anteriores, lo siguiente es dirigirnos a la dirección que nos indique la terminal, en mi caso aparece lo siguiente.

terminal

Así que en nuestro navegador (chrome, safari, arc, edge), escribiremos la dirección que nos indica la terminal, en mi caso http://localhost:5173/, esto puede cambiar según las actualizaciones de vue, solo coloca la dirección que te muestra la terminal y todo estará bien, confía en mí.

Ya completamos esa parte, ahora abre tu editor de código en el proyecto correspondiente que acabamos de crear, y si ya lo tienes en la terminal solo escribe code . como verás en el video de aquí abajo

terminal

Una vez con el editor de código abierto, lo que haremos es muy sencillo, iremos al archivo app.vue, y aquí borrarás todo el documento, sin miedo, hazlo, después escribirás lo siguiente.

<template>
  <div class="container">
    <div class="welcome">
      <h1>Bienvenidos a mi Blogggg</h1>
      <img 
        src="https://i.pinimg.com/236x/b6/ef/77/b6ef77457af02e5a597703e4903a1dad.jpg"
        alt="Imagen descriptiva">
      <p class="">
        Esta es una super descripción genérica para el blog de como usar sass. Aquí podrás encontrar contenido sobre programación, tecnología, y mucho más.
      </p>
      <div class="social-media">
        <a 
          href="https://facebook.com"
          target="_blank">
          <img 
            src="https://i.pinimg.com/236x/56/30/d2/5630d2355f9da80b900fd4523389d169.jpg" 
            alt="Facebook">
        </a>
        <a 
          href="https://twitter.com"
          target="_blank">
          <img 
            src="https://i.pinimg.com/236x/07/df/57/07df57f369b03a4cc85a94bfb7002db9.jpg" 
            alt="Twitter">
        </a>
        <a 
          href="https://instagram.com"
          target="_blank">
          <img 
            src="https://i.pinimg.com/236x/73/ec/fe/73ecfe9b8b2801adf54eb66e58efc4dd.jpg"
            alt="Instagram">
        </a>
      </div>
    </div>
  </div>
</template>

<style>
.welcome {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.welcome img {
  margin-top: 20px;
  width: 150px;
  height: auto;
  border-radius: 10px;
}

.social-media {
  margin-top: 20px;
}

.social-media a {
  margin: 0 10px;
}

.social-media img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.social-media img:hover {
  transform: scale(1.1);
}
</style>
src/App.vue

Solo copia y pega, esto es solo un modelo que generé con ChatGpt. Lo siguiente que tienes que hacer es eliminar todo el contenido por defecto de la carpeta assets, ahora te muestro

archivos

Eliminarás esos tres archivos, y luego irás al archivo main.js, como puedes ver aquí arriba se visualiza el archivo, está justo debajo de App.vue. Una vez que estés dentro de ese archivo tendrás que eliminar la siguiente línea.

src/main.js

El archivo te quedaría algo así

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())

app.mount('#app')
src/main.js

Una vez que hagas esto ve al navegador y deberías visualizar algo así

navegador

Perfecto, si ves esto en tu navegador es que completaste todo tal como te dije, paso a paso como un verdadero desarrollador.

Lo siguiente será regresar a la terminal porque instalaremos unas dependencias

npm i sass sass-loader -D
terminal

Cuando hayas ejecutado el comando anterior en la terminal, iremos al proyecto, una vez aquí dentro de la carpeta src/ crearemos una carpeta llamada styles/, y dentro de esta carpeta haremos tres archivos que serán los siquientes _colorVariables.scss, _externalVariables.scss y _variables.scss, una vez que hayas hecho eso dentro de el archivo _colorVariables.scss escribirás los colores de tu proyecto, en mi caso escribí lo siguiente.

$orange: #ffa500;
$green: #b3ff00;
$blue: #00b5ff;
$pink: #ff00bd;
src/styles/_colorVariables.scss

Ahora iremos al archivo _externalVariables, como lo puedes ver por el nombre ahí irán los imports necesarios para que sean externos a nuestro proyecto, por ejemplo las fuentes del proyecto,  a continuación te muestro como establecer fuentes directamente desde google fonts, abre el sitio y verás lo siguiente en pantalla

google fonts website

Aquí escogeremos la fuente que nosotros deseemos, en mi caso escogeré la primera de la lista, esa que tiene de nombre «Strait». Primero presionamos la primera opción, me refiero a esta

google fonts website

Yo escogí esta, tu puedes escoger la que mas te guste, tienen una biblioteca gigantesca de fuentes.

Bien, una vez seleccionado veremos lo siguiente, y presionaremos la siguiente opción

google fonts website

Después de haberlo hecho harás lo siguiente

google fonts website

Después de copiar lo de aquí arriba en el archivo de _externalVariables.scss, haremos pegaremos lo que copiamos anteriormente, si no sabes que, observa el video de aquí arribita

@import url('https://fonts.googleapis.com/css2family=Strait&display=swap')

Vendrá así pero eliminaremos la etiqueta style, no la necesitamos, quedando de resultado lo siguiente

@import url('https://fonts.googleapis.com/css2family=Strait&display=swap')
src/styles/_externalVariables.scss

Perfecto, ahora lo que haremos es movernos al último archivo llamado _variables.scss, y lo primero que haremos será importar lo de los archivos anteriores, lo harás de la siguiente manera

//colores
@import './colorVariables';

// tipografía
@import './externalVariables';
src/styles/_variables.scss

Ahora a continuación de esto podremos establecer la magia de sass que nos facilita el uso de css en nuestro proyecto.

Sigue lo que haré a continuación

$font: 'Strait', sans-serif;

$size: 1rem;

* {

En Grupo MET podemos ayudarte a implementar esta y muchas mas herramienta para optimizar tu trabajo. ¡Contáctanos para saber más!

Contactanos