Estilos CSS y SCSS con Svelte

¿Cómo añadir estilos en Svelte?

<script>
/* Código JS aquí */>
</script>
<p>Aquí irá tu fantástico HTML 😉</p>
<script>
/* Código JS aquí */>
</script>
<p>Aquí irá tu fantástico HTML 😉</p>
<style>
p {
color: green;
font-family: 'Comic Sans MS', cursive;
font-size: 3em;
}
</style>
<!-- Hijo.svelte -->
<p>Esto es un componente hijo</p>
<script>
import Hijo from './Hijo.svelte';
</script>
<p>Aquí irá tu fantástico HTML 😉</p>
<Hijo />
<style>
p {
color: green;
font-family: 'Comic Sans MS', cursive;
font-size: 3em;
}
</style>

Estilos globales

<!-- App.svelte -->
<script>
import './estilo.css';
</script>
<p>Mi párrafo de ejemplo con un <a href="#">enlace</a>.</p>/* src/estilo.css */a {
color: green;
}
a:hover {
color: red;
}

Usar preprocesadores de CSS

¿Qué es SCSS?

Ventajas de SCSS

Desventajas de utilizar SASS

Instalar dependencias

npm install svelte-preprocess node-sass
// importamos la librería
import preprocess from 'svelte-preprocess';
/* ... */// ... y añadimos el "preprocess" como un plugin:
export default {
/* ... */
plugins: [
svelte({
/* ... */
preprocess: preprocess()
})
}),
/* ... */
}
<!-- App.svelte -->
<script>
import './estilo.scss';
</script>
<p>Mi párrafo de ejemplo con un <a href="#">enlace</a>.</p>/* src/estilo.scss */a {
color: green;
&:hover {
color: red;
}
}

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store