Cómo importar un archivo Sass a cada componente de Vue en una aplicación

Si está trabajando en una aplicación Vue a gran escala, es probable que en algún momento desee organizar la estructura de su aplicación para tener algunas variables definidas globalmente para CSS que pueda utilizar en cualquier parte. de su aplicación.

Esto se puede lograr escribiendo este fragmento de código en cada componente de su aplicación:

style  @import "./styles/_variables.scss";/style

¡¿Pero quién tiene tiempo para eso?! Somos programadores, hagamos esto programáticamente.

¿Por qué?

Quizás se pregunte por qué querríamos hacer algo como esto, especialmente si recién está comenzando en el desarrollo web. Los globales son malos, ¿verdad? ¿Por qué necesitaríamos esto? ¿Qué son las variables Sass? Si ya sabe todo esto, puede pasar a la siguiente sección para su implementación.

Las empresas grandes y pequeñas tienden a sufrir rediseños al menos cada uno o dos años. Si su base de código es grande, está administrada por muchas personas y necesita cambiar todas line-heightlas partes de 1.1rema 1.2rem, ¿realmente desea volver a cada módulo y cambiar ese valor? Una variable global resulta aquí extraordinariamente útil. Tú decides qué puede estar en el nivel superior y qué debe ser heredado por otras piezas más pequeñas. Esto evita los espagueti del código CSS y mantiene el código SECO .

Una vez trabajé para una empresa que tenía una base de código gigantesca y en expansión. Un día antes de un lanzamiento importante, estábamos pedidos desde arriba de que estábamos cambiando el color principal de nuestra marca. Debido a que el código base estaba bien configurado con este tipo de variables definidas correctamente, tuve que cambiar el color en una ubicación y se propagó a través de 4000 archivos. Eso es bastante poderoso. Tampoco tuve que pasar toda la noche para lograr el cambio a tiempo.

Los estilos tienen que ver con el diseño. El buen diseño es, por naturaleza, exitoso cuando es cohesivo. Una base de código que reutiliza piezas comunes de estructura puede parecer más unida y también tiende a parecer más profesional. Si tienes que redefinir algunas piezas base de tu aplicación en cada componente, esto comenzará a fallar, tal como lo hace una frase en un clásico juego de teléfono.

Las definiciones globales también pueden ser una autocomprobación para los diseñadores: “Espera, ¿tenemos otro botón terciario? ¿Por qué?” Las fugas en UI/UX cohesivas se anuncian bien en este modelo.

¿Cómo?

Lo primero que necesitamos es tener instalado vue-cli 3. Luego creamos nuestro proyecto:

npm install -g @vue/cli# ORyarn global add @vue/cli# then run this to scaffold the projectvue create scss-loader-example

Cuando ejecutamos este comando, nos aseguraremos de utilizar la plantilla que tiene la opción Sass:

? Please pick a preset: Manually select features? Check the features needed for your project:  ◉ Babel  ◯ TypeScript  ◯ Progressive Web App (PWA) Support  ◯ Router  ◉ Vuex❯ ◉ CSS Pre-processors  ◉ Linter / Formatter  ◯ Unit Testing  ◯ E2E Testing

Las otras opciones dependen de usted, pero necesita marcar la opción Preprocesadores CSS. Si ya tienes un proyecto de vue cli 3, ¡no temas! También puedes ejecutar:

npm i node-sass sass-loader# ORyarn add node-sass sass-loader

Primero, creamos una nueva carpeta dentro del directorio src. Llámame al mío styles. Dentro de eso, creé un _variables.scssarchivo, como el que vería en proyectos populares como bootstrap. Por ahora, solo pon una única variable dentro para probar:

$primary: purple;

Ahora, creemos un archivo llamado vue.config.jsen la raíz del proyecto al mismo nivel que su package.json. En él vamos a definir algunos ajustes de configuración. Puede leer más sobre este archivo aquí.

Dentro de él, agregaremos esa declaración de importación que vimos anteriormente:

module.exports = {  css: {    loaderOptions: {      sass: {        data: `@import "@/styles/_variables.scss";`      }    }  }};

El lector Dan Danciu señala que a partir de sass-loader 8, datadebe estar prependDataarriba.

El lector Esteban Jelicich señala que a partir de sass-loader 9, datadebe estar additionalDataarriba.

Bueno, un par de cosas clave para tener en cuenta aquí:

• Deberá cerrar y reiniciar su servidor de desarrollo local para que cualquiera de estos cambios se aplique.
• Eso @/en la estructura del directorio antes de los estilos le indicará a este archivo de configuración que busque dentro del srcdirectorio.
• No necesita el guión bajo el nombre del archivo para que esto funcione. Esta es una convención de nomenclatura de Sass.
• Los componentes que importan necesitarán el atributo lang="scss"(o sass, o less, o cualquier preprocesador que esté usando) en la etiqueta de estilo en el .vuecomponente de archivo único. (Vea el ejemplo a continuación).

¡Ahora podemos ingresar a nuestro App.vuecomponente predeterminado y comenzar a usar nuestra variable global!

style#app {  font-family: "Avenir", Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  //this is where we use the variable  color: $primary;  margin-top: 60px;}/style

¡Aquí tienes un ejemplo práctico! Puedes ver cómo el texto de nuestra aplicación se vuelve morado:

Queremos agradecer a Ives, que creó CodeSandbox, por crear una configuración especial para que podamos ver estos cambios en acción en el navegador. Si desea realizar cambios en este sandbox, hay una opción especial en el Panel de control del servidor en la barra lateral izquierda, donde puede reiniciar el servidor. ¡Gracias, Ives!

¡Y ahí lo tienes! Ya no tendrás que realizar la tarea repetitiva de @importeditar el mismo archivo de variables en toda su aplicación Vue. Ahora, si necesita refactorizar el diseño de su aplicación, puede hacerlo todo en un solo lugar y se propagará por toda su aplicación. Esto es especialmente importante para aplicaciones a escala.