Header Ads

Cara meng-compile file scss menjadi css

bootstrap
materialize
angular js

Saat ini ada bermacam-macam CSS Framework seperti bootstrap, materialize, dll. Anda bisa menggunakan itu untuk merubah tampilan site anda menjadi responsive, dan lebih cantik tampilan nya. Anda juga bisa merubah style bawaan dari css framework tersebut sesuai dengan keinginan anda. Jika anda ingin menganti style bawaan anda harus merubah file scss dan mengcompile ke dalam bentuk css.

Untuk mecompile silahkan ikuti petunjuk berikut ini:
Hal yang harus dipersiapkan yaitu :
- Software NodeJS, anda bisa mendownloadnya disini
  1. Setelah NodeJS berhasil didownload, lakukan penginstallan pada komputer.
  2. Setelah berhasil terinstall. Buka program "Command Prompt"
  3. Lalu arahkan ke folder xampp/htdocs/projectmu
  4. Setelah diarahkan ke project anda, ketik "npm init", nanti akan muncul package.json didalam folder project anda
  5. Setelah itu install node-sass dengan mengetik "npm install node-sass"
  6. buka package.json tersebut dengan text editor
  7. lalu pada bagian script :
    tambahkan scss, seperti ini
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "scss": "node-sass --watch scss -o css"
    }
    ket :
    node-sass : adalah package yang kita install tadi
    --watch : membaca foldes scss
    scss : lokasi file scss nya
    -o css : tujuan untuk mennyimpan hasil compile scss
  8. Setelah itu kembali lagi ke Command Prompt kita tadi lalu jalankan scss nya dengan mengetikkan "npm run scss". tunggu hingga muncul tulisan "node-sass ...dan seterusnya"
  9. Selamat anda sudah bisa mengedit file scss dari CSS Framework bawaan.
Ok selamat berkarya.

No comments

Theme images by Flashworks. Powered by Blogger.