Cuando trabajamos con Svelte, integrar tecnologías como SCSS o TypeScript puede parecer complicado al principio, pero con las herramientas adecuadas, el proceso se simplifica mucho. Una de las soluciones más potentes para esto es svelte-preprocess, un preprocesador que se añade a la cadena de compilación y nos permite usar una gran variedad de lenguajes y preprocesadores más allá de CSS y JavaScript, como PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug, entre otros.
Si queremos añadir soporte para SCSS y TypeScript en un proyecto Svelte, lo ideal es planificarlo desde el inicio. Por ejemplo, al crear un proyecto con Bit, podemos elegir una plantilla que ya incluya TypeScript (svelte.ts), lo que nos ahorra tener que configurar archivos como tsconfig.json manualmente. Sin embargo, si ya tenemos un proyecto y queremos añadir estas tecnologías después, no hay problema: podemos hacerlo instalando svelte-preprocess y configurándolo correctamente.
Para empezar, instalamos svelte-preprocess en nuestro proyecto con un comando como:
npm i -D svelte-preprocess
Dependiendo del gestor de paquetes que usemos, puede variar el comando, pero la idea es añadirlo como dependencia de desarrollo. Además, si queremos usar SCSS, necesitaremos instalar también sass:
npm i -D sass
Luego, en el archivo de configuración de Svelte, que en proyectos con Bit suele ser bit.config.js o bit.config.ts, importamos sveltePreprocess y lo añadimos a la configuración del plugin Svelte. La función que configura Svelte acepta un parámetro donde podemos especificar un array de preprocesadores. Así, la configuración básica para SCSS y TypeScript quedaría algo así:
import sveltePreprocess from 'svelte-preprocess';
export default {
// otras configuraciones...
svelte: {
preprocess: sveltePreprocess({
scss: true,
typescript: true
}),
},
};
Con esto, ya estamos indicando que queremos que Svelte procese archivos con SCSS y TypeScript. Pero para que el compilador sepa qué tipo de código hay en cada archivo, debemos indicarlo en las etiquetas <style> y <script> dentro de nuestros componentes Svelte. Por ejemplo, para usar SCSS en los estilos, añadimos el atributo lang="scss":
<style lang="scss">
button {
color: black;
&:hover {
color: blue;
}
}
</style>
El símbolo & en SCSS nos permite referirnos al selector padre, lo que ayuda a compactar y organizar mejor los estilos. Al usar lang="scss", el preprocesador sabe que debe interpretar ese bloque como SCSS y no como CSS plano.
De manera similar, para usar TypeScript en el script del componente, añadimos lang="ts":
<script lang="ts">
let count: number = 0;
function increment() {
count += 1;
}
</script>
Esto nos permite aprovechar el tipado estático de TypeScript dentro de nuestros componentes Svelte, mejorando la calidad y mantenibilidad del código.
Es importante asegurarnos de que las dependencias necesarias estén instaladas. Por ejemplo, si activamos TypeScript en svelte-preprocess, debemos tener instalado el paquete typescript:
npm i -D typescript
Si intentamos usar un preprocesador sin tener la dependencia correspondiente, el compilador nos mostrará un error indicando que no puede encontrar el paquete necesario.
Además de SCSS y TypeScript, svelte-preprocess soporta muchas otras tecnologías. Podemos configurar soporte para PostCSS, Less, CoffeeScript, Pug y más, simplemente activándolos en la configuración y asegurándonos de instalar las dependencias necesarias. Por ejemplo, para usar Pug en las plantillas, podemos escribir:
<script lang="pug">
// código pug aquí
</script>
Esto nos permite escribir HTML con una sintaxis alternativa que algunos desarrolladores encuentran más cómoda o expresiva.
En definitiva, svelte-preprocess es una herramienta muy flexible que nos permite enriquecer nuestros proyectos Svelte con múltiples lenguajes y preprocesadores, facilitando un flujo de desarrollo más potente y adaptado a nuestras necesidades. Solo tenemos que instalar las dependencias, configurar el preprocesador en nuestro proyecto y usar los atributos lang en los bloques de código para que todo funcione correctamente.