loading...

Menggunakan Purge CSS

mzaini30 profile image Zen ・1 min read

Install:

npm i -D purgecss
Enter fullscreen mode Exit fullscreen mode

Di package.json:

"scripts": {
    "purgecss": "purgecss --css public/dist/bootstrap.min.css --content src/**/*.svelte --output public/dist2",
    "build": "routify -b --dynamic-imports && rollup -c && npm run purgecss && node script/salin.js && node script/pakaiPurge.js",
},
Enter fullscreen mode Exit fullscreen mode

Buat file public/dist2/.hello

Di .gitignore:

/public/dist2/bootstrap.min.css
Enter fullscreen mode Exit fullscreen mode

Tambahkan di dist/global.css:

body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}
Enter fullscreen mode Exit fullscreen mode

Isi dari script/pakaiPurge.js:

fs = require('fs')
namaFile = 'hasil/index.html'
fs.readFile(namaFile, 'utf8', (_, x) => {
    x = x.replace('/dist/bootstrap.min.css', '/dist2/bootstrap.min.css')
    fs.writeFile(namaFile, x, 'utf8', () => {})
})
Enter fullscreen mode Exit fullscreen mode

Hasil: https://svelte-brown.vercel.app/

Catatan: Dia kalau di Svelte kita pakai dynamic class (nggak ditulis langsung di htmlnya, nama classnya), purgecss nggak bisa deteksi. Solusinya pakai whitelist di option purgecss (ada di Google tutorialnya)

Discussion

pic
Editor guide