Intégrer le pré-processeur SASS à son projet Svelte? C’est super simple. Bonus: on peut personnaliser le framework Bulma.
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:
1npm 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):
1import svelte from 'rollup-plugin-svelte';
2import commonjs from '@rollup/plugin-commonjs';
3import resolve from '@rollup/plugin-node-resolve';
4import livereload from 'rollup-plugin-livereload';
5import { terser } from 'rollup-plugin-terser';
6import css from 'rollup-plugin-css-only';
7import { scss } from 'svelte-preprocess';
8
9const production = !process.env.ROLLUP_WATCH;
10
11function serve() {
12 let server;
13
14 function toExit() {
15 if (server) server.kill(0);
16 }
17
18 return {
19 writeBundle() {
20 if (server) return;
21 server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
22 stdio: ['ignore', 'inherit', 'inherit'],
23 shell: true
24 });
25
26 process.on('SIGTERM', toExit);
27 process.on('exit', toExit);
28 }
29 };
30}
31
32export default {
33 input: 'src/main.js',
34 output: {
35 sourcemap: true,
36 format: 'iife',
37 name: 'app',
38 file: 'public/build/bundle.js'
39 },
40 plugins: [
41 svelte({
42 compilerOptions: {
43 // enable run-time checks when not in production
44 dev: !production
45 },
46 preprocess: [
47 scss( { /** options */ } )
48 ]
49 }),
50 // we'll extract any component CSS out into
51 // a separate file - better for performance
52 css({ output: 'bundle.css' }),
53
54 // If you have external dependencies installed from
55 // npm, you'll most likely need these plugins. In
56 // some cases you'll need additional configuration -
57 // consult the documentation for details:
58 // https://github.com/rollup/plugins/tree/master/packages/commonjs
59 resolve({
60 browser: true,
61 dedupe: ['svelte']
62 }),
63 commonjs(),
64
65 // In dev mode, call `npm run start` once
66 // the bundle has been generated
67 !production && serve(),
68
69 // Watch the `public` directory and refresh the
70 // browser on changes when not in production
71 !production && livereload('public'),
72
73 // If we're building for production (npm run build
74 // instead of npm run dev), minify
75 production && terser()
76 ],
77 watch: {
78 clearScreen: false
79 }
80};
Ajouter des couleurs personnalisées
Dans le dossier src/, j’ai ajouté un dossier sass/ puis un fichier homeged.scss avec ce contenu (extrait)
1$ged-color-base-white-00: #ffffff !default;
2
3$ged-color-base-black-00: #000000 !default;
4$ged-color-base-black-01: #3b3b3b !default;
5$ged-color-base-black-02: #777777 !default;
6$ged-color-base-black-03: #b9b9b9 !default;
7
8.ged-gradient-base { width: 50px; }
9.ged-gradient-base-black-00 { background-color: $ged-color-base-black-00; }
10.ged-gradient-base-black-01 { background-color: $ged-color-base-black-01; }
11.ged-gradient-base-black-02 { background-color: $ged-color-base-black-02; }
12.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).
Puis, toujours dans src/App.svelte, j’ai ajouté ceci dans le footer:
1<div class="hero-foot">
2 <div class="container">
3 <div class="tabs is-centered">
4 <div class="ged-gradient-base ged-gradient-base-black-00"> </div>
5 <div class="ged-gradient-base ged-gradient-base-black-01"> </div>
6 <div class="ged-gradient-base ged-gradient-base-black-02"> </div>
7 <div class="ged-gradient-base ged-gradient-base-black-03"> </div>
8 </div>
9 </div>
10 </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
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:
1$primary: $ged-color-base-black-02 !default;
2$info: $ged-color-base-black-03 !default;
3$success: $ged-color-base-black-02 !default;
4$warning: $ged-color-base-black-02 !default;
5$danger: $ged-color-base-black-01 !default;
6
7@import "./bulma/utilities/_all";
8@import "./bulma/base/_all";
9@import "./bulma/elements/_all";
10@import "./bulma/form/_all";
11@import "./bulma/components/_all";
12@import "./bulma/grid/_all";
13@import "./bulma/helpers/_all";
14@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.