Integrasi Custom Bulma dengan ReactJs

Kamu pasti juga ngalamin susah nya mengubah warna primary bulma untuk dipakai di reactjs, dan berakhir dengan merubah nya secara manual.

Saya akan berbagi cara mudah banget untuk merubah primary color dan variable lain di bulma tanpa kesulitan, bahkan kalau belum pernah tau tentang Sass sekalipun seperti saya.

Wow, terkesima banget dengan Sass. Sekali nyoba langsung jatuh cinta.

Install ReactJs

Install sesuai docs nya

npx create-react-app my-app
cd my-app
npm start

Install Bulma

Install bulma seuai docs nya juga

npm install --save bulma

Buat file HTML

Ubah isi filesrc/App.js di dalam return menjadi seperti ini:

return (
  <div>
    <section className="section">
      <div className="container">
        <h1 className="title">
          Hello World
        </h1>
        <p className="subtitle">
          My first website with <strong>Bulma</strong>!
        </p>
        <button className="button is-primary">Tombol</button>
      </div>
    </section>
  </div>
);

Maka tampilannya akan menjadi html biasa:

Setting Sass

1. Hapus isi file src/index.css
2. Buat file src/index.scss lalu isi dengan kode berikut

@charset "utf-8";
// Set your brand colors
$purple: #7200ff;
// Update Bulma's global variables
$primary: $purple;
// Update some of Bulma's component variables
$box-padding: 0.75rem;
// Import all bulma component / element
@import "../node_modules/bulma/bulma.sass";

3. Install Package untuk men generate file .css dari file .scss

npm install --save node-sass-chokidar

Nantinya, tiap kali kita mulai npm start maka akan tergenerate file index.css baru, maka dari itu, perlu di gitignore. Tambahkan src/index.css ke file .gitignore

4. Install npm-run-all supaya bisa membuild file css sekalian npm start

npm install --save npm-run-all

5. Tambahkan bagian script di file package.json agar menjadi seperti ini:

"scripts": {
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "start-js": "react-scripts start",
  "start": "npm-run-all -p watch-css start-js",
  "build-js": "react-scripts build",
  "build": "npm-run-all build-css build-js",  
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

6. Langkah setting Sass selesai. Silahkan stop npm start, lalu npm start lagi. Jika langkah-langkahnya benar, maka sekarang bulma sudah menggunakan style baru yang kita definisikan di index.scss

Di file index.scss tadi saya tambahkan pula $box-padding:0.75rem; itu adalah untuk mengubah element-element lain yang tadinya harus dibubah manual kalau mau custom. Kamu juga bisa mengubah variable lain sesuai keinginan. Seperti gambar di samping, bisa dilihat list variable apa saja yang bisa diubah untuk element box