Cuando trabajamos con Svelte, es habitual querer aplicar estilos globales que afecten a toda nuestra aplicación, como definir la tipografía o el fondo del body. Aunque Svelte nos permite usar el pseudoselector :global para crear estilos que no se limiten a un componente, abusar de esta técnica puede generar una sobrecarga innecesaria. Por eso, cuando necesitamos estilos globales extensos o la raíz de nuestra aplicación debe tener estilos que se apliquen en todo el proyecto, lo más recomendable es separar esos estilos en una hoja CSS externa.
Para ello, podemos crear un archivo, por ejemplo global.css, dentro de una carpeta como assets. En este archivo pondremos los estilos globales que queramos, como:
body {
font-family: Verdana, sans-serif;
background-color: #a0d468; /* un verde suave para no molestar la vista */
}
Una vez que tenemos esta hoja de estilos, la pregunta es cómo importarla en nuestro proyecto Svelte. La forma correcta es hacerlo dentro de la etiqueta <script> de nuestro componente raíz o del que corresponda, usando un import como si fuera un módulo JavaScript:
<script>
import './assets/global.css';
</script>
Aunque a primera vista pueda parecer extraño importar un archivo CSS dentro de un bloque de script, los compiladores y transpiladores modernos entienden esta sintaxis y se encargan de procesar correctamente los estilos, separándolos del código JavaScript y agregándolos a la hoja de estilos final que se inyecta en la página. Así, el CSS global se aplica sin problemas y sin necesidad de usar el pseudoselector :global repetidamente.
Esta técnica no solo sirve para nuestras propias hojas de estilo, sino que también es la forma recomendada para integrar frameworks CSS externos. Por ejemplo, si instalamos con NPM alguna biblioteca como normalize.css, que estandariza estilos básicos para todos los navegadores, podemos importarla directamente en nuestro script:
<script>
import 'normalize.css/normalize.css';
</script>
De esta manera, los estilos de normalize.css se aplicarán globalmente en nuestra aplicación. Lo mismo ocurre con otros frameworks populares como Bootstrap, Bulma, Materialize o incluso versiones precompiladas de Tailwind. Importarlos así nos asegura que sus estilos estén disponibles sin complicaciones ni configuraciones adicionales.
Además, esta forma de importar no se limita solo a CSS. También podemos importar imágenes como variables para usarlas dentro de nuestros componentes. Por ejemplo, si tenemos una imagen llamada svelte.png en la carpeta assets, podemos hacer:
<script>
import svelteLogo from './assets/svelte.png';
</script>
<img src="{svelteLogo}" alt="Logo de Svelte" />
Aquí, la variable svelteLogo contendrá la ruta optimizada a la imagen, lo que facilita su uso en etiquetas <img> sin preocuparnos por rutas relativas o configuraciones adicionales. Esto es especialmente útil cuando trabajamos con bundlers que optimizan y gestionan los recursos estáticos.
En resumen, separar los estilos globales en archivos CSS externos e importarlos desde el script es una práctica limpia y eficiente en Svelte. Además, esta técnica nos permite integrar frameworks CSS y manejar imágenes de forma sencilla, manteniendo nuestro código organizado y aprovechando las capacidades modernas de los compiladores y bundlers.