Sass avec Svelte

Intégrer le pré-processeur SASS à Svelte

Introduction

Dans l’article précédent, on a vu comment réaliser une première page avec Svelte. Ici on va voir comment ajouter le support SASS afin de mettre en place une charte graphique personnalisée.

Installer SASS

Pour installer le pré-processeur, il faut, évidemment, passer par NPM:

npm i -D node-sass svelte-preprocess

Ensuite, il faut modifier le fichier rollup.config.js pour inclure l’étape de pré-processing (modifications en bleu):

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
import { scss } from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			},
			preprocess: [
				scss( {  /** options */ } )
			]
		}),
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

Ajouter des couleurs personnalisées

Dans le dossier src/, j’ai ajouté un dossier sass/ puis un fichier homeged.scss avec ce contenu (extrait)

$ged-color-base-white-00: #ffffff !default;

$ged-color-base-black-00: #000000 !default;
$ged-color-base-black-01: #3b3b3b !default;
$ged-color-base-black-02: #777777 !default;
$ged-color-base-black-03: #b9b9b9 !default;

.ged-gradient-base { width: 50px; }
.ged-gradient-base-black-00 { background-color: $ged-color-base-black-00; }
.ged-gradient-base-black-01 { background-color: $ged-color-base-black-01; }
.ged-gradient-base-black-02 { background-color: $ged-color-base-black-02; }
.ged-gradient-base-black-03 { background-color: $ged-color-base-black-03; }

Ensuite, il faut inclure ce fichier dans notre page src/App.svelte (en bleu, les modifications apportées).

<style type="text/scss">
	@import "./sass/homeged";
	.ged-home-illu {
	    border: 1px solid #222222;
	    border-radius: 6px;
	}
</style>

Puis, toujours dans src/App.svelte, j’ai ajouté ceci dans le footer:

<div class="hero-foot">
				<div class="container">
					<div class="tabs is-centered">
						<div class="ged-gradient-base ged-gradient-base-black-00">&nbsp;</div>
						<div class="ged-gradient-base ged-gradient-base-black-01">&nbsp;</div>
						<div class="ged-gradient-base ged-gradient-base-black-02">&nbsp;</div>
						<div class="ged-gradient-base ged-gradient-base-black-03">&nbsp;</div>
					</div>
				</div>
			</div>

Ensuite, on lance le serveur NPM avec un petit npm run dev et la page affiche une (magnifique!) palette de quatre couleurs du noir au gris moyen.

Dégradé en quatre couleurs
Dégradé en quatre couleurs

Modifier les couleurs de Bulma

Pour adapter Bulma à notre charte graphique (ok, le gars a un dégradé à quatre couleurs et il appelle ça « charte graphique »…), il faut déplacer (ou copier) le contenu du dossier public/bulma/sass dans le dossier src/sass/bulma. Ensuite, il faut compléter le fichier src/sass/homeged.scss avec ce code:

$primary: $ged-color-base-black-02 !default;
$info: $ged-color-base-black-03 !default;
$success: $ged-color-base-black-02 !default;
$warning: $ged-color-base-black-02 !default;
$danger: $ged-color-base-black-01 !default;

@import "./bulma/utilities/_all";
@import "./bulma/base/_all";
@import "./bulma/elements/_all";
@import "./bulma/form/_all";
@import "./bulma/components/_all";
@import "./bulma/grid/_all";
@import "./bulma/helpers/_all";
@import "./bulma/layout/_all";

En procédant ainsi, les couleurs $primary, $info, $success, $warning et $danger propres à Bulma sont remplacées lors de la compilation par notre palette puis l’ensemble des classes CSS de Bulma en héritent. Ainsi notre palette est propagée automatiquement. Bien sûr, il y a d’autres couleurs Bulma à personnaliser, comme indiqué dans la documentation.

Conclusion

L’intégration de SASS à la chaîne de compilation Svelte est réalisée en quelques minutes et permet une personnalisation facile et rapide du framework Bulma.

Leave a Reply

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

code