Cómo importar un archivo Sass en cada componente de Vue en una aplicación | Programar Plus

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 que tenga 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 lang="scss">
  @import "./styles/_variables.scss";
</style>

Pero, ¿quién tiene tiempo para eso? Somos programadores, hagámoslo 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 incluso las variables Sass? Si ya sabe todo esto, puede saltar a la siguiente sección para la implementación.

Las empresas grandes y pequeñas tienden a tener 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 el line-height en todas partes desde 1.1rem a 1.2rem, ¿realmente desea tener que volver a cada módulo y cambiar ese valor? Una variable global se vuelve extraordinariamente útil aquí. Usted decide qué puede estar en el nivel superior y qué debe ser heredado por otras piezas más pequeñas. Esto evita el código espagueti en CSS y mantiene su 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, llegaron órdenes de que cambiáramos el color principal de nuestra marca. Debido a que el código base se configuró bien 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 en vela para conseguir 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 partes comunes de la estructura puede verse más unida y también tiende a verse más profesional. Si tiene que redefinir algunas piezas base de su aplicación en cada componente, comenzará a descomponerse, tal como lo hace una frase en un juego clásico 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 la UI/UX cohesiva 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
# OR
yarn global add @vue/cli

# then run this to scaffold the project
vue create scss-loader-example

Cuando ejecutemos este comando, nos aseguraremos de usar 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 de CSS. Si tiene un proyecto vue cli 3 existente, ¡no tenga miedo! También puedes ejecutar:

npm i node-sass sass-loader
# OR
yarn add node-sass sass-loader

Primero, hagamos una nueva carpeta dentro del directorio src. llamé al mío styles. Dentro de eso, creé un _variables.scss archivo, como se vería en proyectos populares como bootstrap. Por ahora, solo pongo una sola variable dentro para probar:

$primary: purple;

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

Dentro de él, agregaremos la declaración de importación que vimos antes:

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

El lector Dan Danciu señala que a partir de sass-loader 8, data necesita ser prependData sobre.

El lector Esteban Jelicich señala que a partir de sass-loader 9, data necesita ser additionalData sobre.

OK, un par de cosas clave a tener en cuenta aquí:

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

Ahora, podemos ir a nuestro predeterminado App.vue componente y comience a usar nuestra variable global!

<style lang="scss">
#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í hay un ejemplo de trabajo! Puedes ver que el texto en nuestra aplicación se vuelve morado:

Gracias a Ives, quien creó CodeSandbox, por establecer una configuración especial para nosotros para que pudiéramos ver estos cambios en acción en el navegador. Si desea realizar cambios en este espacio aislado, hay una opción especial Panel de control del servidor opción en la barra lateral izquierda, donde puede reiniciar el servidor. ¡Gracias, Ives!

¡Y ahí lo tienes! Ya no tienes que hacer la tarea repetitiva de @import-ing 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á a través de su aplicación. Esto es especialmente importante para aplicaciones a escala.

(Visited 7 times, 1 visits today)