Cara Menambahkan CSS Pada React (External)

Pada tutorial sebelumnya, kita sudah belajar cara menambahkan sintaks CSS secara internal/inline pada React. Nah, bagaimana kalau kita ingin memisahkan sintaks CSS ke dalam file lain (external). Ada dua cara yang bisa digunakan, yang pertama yakni cara biasa, dimana kita buat dokumen CSS dan panggil dengan tag link dalam index.html. Cara yang kedua, menggunakan css-loader, cara yang kedua akan kita bahas pada artikel ini.

Pertama kita instal terlebih dahulu loader tools yakni css-loader dan style-loader npm install css-loader style-loader --save-dev.

Pada file webpack.config.js, kita tambahkan module loaders.

Sekarang pisahkan sintaks CSS ke dalam file style.css.

Kemudian pada dokumen React, kita panggil menggunakan perintah require.

Jalankan pada browser dengan webpack-dev-server.

Selesai! Mudah bukan.