Agik Setiawan - October 23, 2022

Menggunakan Laravel Mix di luar Project Laravel

#laravelmix#tailwindcss

Laravel Mix adalah Package yang dibuat oleh Jeffrey Way yang juga sebagai Laracast Creator yang bertujuan untuk memudahkan dalam mengatur Proyek Javascript seperti Code Bundling, Code Minify, CSS Preprocessor dan lain - lain yang di buat berdasarkan Webpack dengan format yang lebih sederhana.

 

Memasukan Laravel Mix di Existing Proyek PHP


Pada contoh kali ini saya akan menggunakan Proyek PHP yang sudah ada, nantinya di dalam Laravel mix menggunakan SCSS dan Tailwind CSS


Contoh Proyek PHP yang sudah ada

 

Setup Laravel Mix


Untuk menginstall Laravel Mix kita membutuhkan Node JS dan NPM, pastikan kita sudah menginstall Node JS dan NPM terlebih dahulu

 

Masuk kedalam proyek PHP yang sudah ada


Masukan perintah

npm init -y
npm install laravel-mix --save-dev


Pada contoh kali ini saya akan menkonfigurasi Laravel Mix dengan Tailwind CSS.

 

Install Tailwind CSS


Masukan perintah

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init


Setelah menjalankan perintah di atas, akan terbentuk file “tailwind.config.js”, lalu edit menjadi seperti dibawah ini

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}


Kemudian buat file “sass/app.scss” 

@tailwind base;
@tailwind components;
@tailwind utilities;


Kemudian install mix-tailwindcss

npm i mix-tailwindcss


Kemudian buat file “webpack.mix.js”

touch webpack.mix.js


Edit file “webpack.mix.js”

// webpack.mix.js
let mix = require("laravel-mix")
require("mix-tailwindcss")

mix.sass("sass/app.scss", "css").tailwind()


Kmpile Mix dengan menjalankan perintah

npx mix

Perintah diatas akan membuat file baru dengan nama “css/app.css” sesuai dengan apa yang ada di dalam file “webpack.mix.js”


Supaya Laravel mix otomatis mengompile pada saat kita merubah kodingan, jalankan perintah

npx mix watch


Edit file index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP Laravel MIX</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <h1 class="text-red-600 text-3xl">PHP Laravel MIX</h1>
</body>
</html>


Jalankan perintah

php -S localhost:9000


Buka bowser dan masukan alamat localhost:9000


Share

Comments