Breaking

Post Top Ad

Your Ad Spot

martes, 10 de diciembre de 2019

Use Svelte con SASS / SCSS en VSCode

Si ha llegado a amar SASS / SCSS, desea usarlo en todas partes. El nuevo marco Svelte, aunque emocionante, no tiene soporte SCSS incorporado. ¡Pero es fácil de agregar!
Siga estos pasos para obtener soporte SASS en su aplicación Svelte, además obtenga resaltado de sintaxis SASS en VSCode.

Agregar soporte SASS al proyecto

La primera pieza de este rompecabezas es hacer que su proyecto pueda construirse con SASS habilitado.
Comenzaremos con la plantilla Svelte estándar, instalada con degit:
npx degit sveltejs/template svelte-with-sass
(por cierto, si va a ejecutar este comando más de una o dos veces, le recomiendo instalarlo degitpermanentemente con en npm i -g degitlugar de llamarlo con npx. ¡Es mucho más rápido!)
Luego, cden el nuevo proyecto, instale todo y también instale el svelte-preprocesspaquete.
cd svelte-with-sass
npm install
npm install svelte-preprocess
Abra el rollup.config.jsarchivo que vino con el proyecto. Solo hay un par de cambios que hacer:
// add this import:
import autoPreprocess from 'svelte-preprocess';

// and inside the svelte plugin, add autoPreprocess:
export default {
  /* ... */
  plugins: [
    svelte({
      /* ... */
      preprocess: autoPreprocess()
    })
  }),
  /* ... */
}
Estamos importando el svelte-preprocesspreprocesador automático y agregando el preprocesspaso al complemento esbelto que ya está allí. El orden no importa aquí; Acabo de poner la preprocessllave en la parte inferior.
Guarde ese archivo y pruébelo ejecutándolo npm run devTodo aún debería funcionar.
Ahora intenta probarlo con algunos SCSS. Cambié App.sveltepara quedar así:
<script>
  export let name;
</script>

<style type="text/scss">
  $color: red;

  h1 {
    color: $color;
  }

  div {
    background: green;

    > p {
      color: #fff;
    }
  }
</style>

<h1>Hello {name}!</h1>

<div>
  <p>SASS is working!</p>
</div>
Después de eso, intente npm run devnuevamente, abra la página, y debería verse algo (horrible) como este:
Una página web con Hello World rojo y texto blanco sobre un fondo verde que muestra que SASS está habilitado y funcionando
Aquí hay una plantilla de inicio basada en sveltejs/template, pero con los cambios aplicados para que SASS funcione: https://github.com/dceddia/svelte-sass-template . Se puede utilizar localmente con degit, también: degit dceddia/svelte-sass-template my-project.

Esbelto con SASS en VSCode

Si usa VSCode, queda algo por hacer para obtener el resaltado de sintaxis SASS en sus archivos Svelte.
Primero, asegúrese de tener instalada la extensión Svelte VSCode .
Luego, abra la configuración de VSCode, escriba "svelte" en el cuadro de búsqueda y busque esta opción llamada "Svelte> Language-server: Runtime":
Encontrar la configuración de Svelte Language Server en VSCode
En el cuadro, ingrese la ubicación de su binario Node.js.
Para encontrar dónde está esto:
  • En un sistema Mac o Linux, abra una terminal y ejecute which node
  • En Windows, abra una terminal y escriba where node
Tome esa ruta e ingrésela en el cuadro "Svelte> Language-server: Runtime".
En mi Mac, eso es /usr/local/bin/node, pero el tuyo puede ser diferente, así que no solo copie a ciegas el mío;)

Windows ...

Si está en Windows, es posible que deba tomar más ... medidas drásticas.
Si su ruta de nodo tiene un espacio (como C:\Program Files\nodejs\node.exe), es posible que tenga mejor suerte con la "ruta corta" como C:\Progra~1\nodejs\node.exe.
Si eso todavía no funciona, es posible que tengas suerte estableciendo el camino a un galimatías que definitivamente fallará. Algo así como C:/REMOVE_THIS_LATERSegún @fvbixn en Twitter , eso hizo que el servidor fallara inicialmente, pero luego se reintentó automáticamente y funcionó la segunda vez. Y también asegúrese de que comience con C: / o no funcionará. Muy extraño ... pero bueno, lo que sea que funcione!

Reiniciar VSCode

Una vez hecho esto, reinicie VSCode. Debería poder abrir el mismo App.sveltearchivo de muestra que mostré anteriormente, con la sintaxis SASS, y no ver ningún error de sintaxis.

Establecer el formato en las <style>etiquetas

En sus propios archivos, solo asegúrese de agregar type="text/scss"lang="scss"en cualquier styleetiqueta donde desee usar SASS / SCSS, ¡o no funcionará!
¡Que te diviertas!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas