Use Laravel Mix instead of Vite

The default compiler of Laravel 10 is Vite, however I assume that some of you might want to use the good old usual Laravel Mix compiling solution, like in the previous versions of Laravel.

Create webpack.js file

First, you have to create a webpack.mix.js file, what is the configuration file of Laravel Mix. So open a new Terminal window and cd into your project’s root, and run:

touch webpack.mix.js

Open the newly created file, and add the following content inside:

const mix = require('laravel-mix');

mix

.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

Editing package.json file

Next, open up your package.json file from your project’s root, and replace this part:

"type": "module",
"scripts": {
    "dev": "vite",
    "build": "vite build"
},
"devDependencies": {
    "@popperjs/core": "^2.11.6",
    "axios": "^1.1.2",
    "bootstrap": "^5.2.3",
    "laravel-vite-plugin": "^0.7.5",
    "sass": "^1.56.1",
    "vite": "^4.0.0"
}

to this:

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},
"devDependencies": {
    "@popperjs/core": "^2.11.6",
    "axios": "^1.1.2",
    "bootstrap": "^5.2.3",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.32.11",
    "sass-loader": "^11.0.1",
}

Then run the following function to install the new dependencies:

npm install && npm update

Change asset calls

Now change the default Vite asset call in resources/views/layouts/app.blade.php, replace this:

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

to this:

<link href="/css/app.css" rel="stylesheet">
<script src="/js/app.js"></script>

And finally run the build function to generate the css and js files:

npm run build

That’s it! 👏