DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Zen
Zen

Posted on

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)

Top comments (0)

Top Heroku Alternatives (For Free)

>> Check out this classic DEV post <<