Cómo instalar e integrar Sass en Vue.js
Contenido
- Introducción
- Sass en un proyecto de Vue desde cero
- Sass en un proyecto de Vue existente
- Dart Sass o Node Sass y ¿por qué?
- Tenga en cuenta
¡Hola, usuarios!
Como podrias saber, El soporte de Ruby Sass finalizó en marzo , este año ( 2019 ). Esto significa que todos deberían migrar sus versiones a Dart Sass o Node Sass .
En este documento, me gustaría mostrarle cómo instalar Sass en un proyecto de Vuejs ya existente y como integrar Sass en un proyecto de Vuejs desde cero .
Sass en un proyecto de Vue desde cero
Esta es la parte más fácil, ¿por qué? Porque con Vue-CLI 3 ¡puedes integrar SASS automáticamente!
como comprar monedas pika
Vamos a codificar.
En primer lugar, vamos a instalar la última versión de Vue Cli . Abriremos la terminal dentro de la carpeta de nuestro proyecto y escribiremos
|_+_|
Una vez hecho esto (puede llevar algún tiempo), comenzaremos creando nuestro proyecto Vue . Escribiremos
|_+_|Ahora, hemos llegado al punto interesante.
Si alguna vez ha creado un proyecto de Vue con Vue Cli, ya sabe de qué se trata. En caso de que no lo hicieras, entonces Bienvenido a tu primera vez.
Nosotros elegiremos
|_+_|Continúe y seleccione cada función que le gustaría tener en su proyecto. Asegúrese de seleccionar la opción Preprocesadores CSS . También elegiré Linter:
|_+_|Próximo paso. Este es el punto clave de este documento. De todas las opciones que se muestran en la lista, puedes elegir Dart Sass o Node Sass, yo elegiré ...
|_+_|Junto a este paso, seleccione un linter que le guste y las opciones que prefiera. Las minas son: Más bonita, al guardar y En archivos de configuración dedicados .
¡Hecho! Cuando termine la instalación, regrese a la carpeta de su proyecto y escriba
|_+_|Si te revisas Vista de la aplicación código en un editor de texto, verá que su< estilo > la etiqueta habla ahora en SASS / SCSS:
inicio de sesión de correo electrónico del corredor de la carretera|_+_|
✨ IMPRESIONANTE✨ , ¿no te parece?
Ve a por ello, es hora de que brillen tus estilos SASS !
Sass en un proyecto de Vue existente
Si tienes un proyecto que no se creó con Vue Cli o simplemente se olvidó de seleccionar la opción de preprocesadores , es mejor que instales Node Sass + Sass Loader. Simplemente abra su terminal dentro de la carpeta del proyecto y escriba
|_+_|Ahora, ve a tu .visto componente, busque su< estilo > etiqueta y dile que ahora está hablando en SASS / SCSS añadiendo lang = scss :
|_+_|Dart Sass o Node Sass y ¿por qué?
Cuál es el diferencia entre Dart o Node Sass? Bueno, aquí vamos como nota al margen .
Dart Sass puede funcionar más lento y usa más memoria (compila JavaScript puro), sin embargo, funciona mejor para multiplataforma que Node-Sass. Además, los archivos Node-Sass toman demasiado tiempo para ser instalado , que no coincide con prototipos o proyectos pequeños y simples. Puede obtener más información sobre esto aquí:
convertir matriz a json
Debes correr
|_+_|para ver los cambios de SASS en vivo. Hacer no Olvídese de esto, de lo contrario, cambiará sus estilos y no los verá cambiar en su página.
Recuerda después de ejecutar tu npm ejecutar servir verás en tu terminal dónde tu aplicación se está ejecutando en la zona , por ejemplo localhost: 8080 , no su página index.html dentro del proyecto.
# vue-js #sass # node-js #javascript # desarrollo web