DEV Community

Zen
Zen

Posted on

1

Menggunakan Purge CSS

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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay