---
# System prepended metadata

title: Laravel-Mix for Wordpress

---

# Laravel-Mix for Wordpress
## Step 1. Create the package.json File
1. Create a `package.json` file in the root of your theme and paste in the following code
*If scripts doesn't work, please check on laravel-mix webiste for updates.*
```
{
    "private": true,
    "scripts": {
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    }
}
```


2. Install LATEST laravel-mix, bootstrap and other components.
```
npm install laravel-mix bootstrap @popperjs/core --save-dev
```



## Step 2. Setup webpack
Create a `webpack.mix.js` file in the same directory as your `package.json` and add the following:
```
let mix = require('laravel-mix');

mix.js('js/app.js', './')
   .sass('sass/style.scss', './');
```

## Step 3. Create Your style.scss File
The final step is to create your `style.scss` file and based on the paths above this will need to go here `sass/style.scss`. Create this file and add the following:
```
/*!
Theme Name:         NAME OF CLIENT
Theme URI:          http://underscores.me/
Description:        Custom developed theme
Version:            1.0.0
Author:             Redding Designs
Author URI:         https://reddingdesigns.com

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

// Bootstrap
@import "bootstrap";
```

Of course, you are free to add any additional Sass files you need for your theme, here are a few examples:
```
// Variables
@import "variables";

// Bootstrap
@import "bootstrap";

// Mixins
@import "mixins";

// Base Styles
@import "basestyles";

// Home Page
@import "home";

// About Page
@import "about";
```

As well as a `app.js` file in the `js` folder and add the following:
```
require('bootstrap');
```
Save this, and run `npm run dev`. Now you should have a compiled `app.js` file in your theme root with all the Bootstrap JavaScript as well as a style.css with all your compiled css.

# Laravel Mix Commands
Laravel Mix provides a few helpful commands while you are developing your theme.
These commands **can be modified** from scripts in package.json.
Here is an outline for the main ones you will need:

`npm run development`
Run dev compiles the assets but does not minify. Useful for seeing the full source.

`npm run production`
Run production compiles and minifies, ready for you to push to production.

`npm run watch`
This keeps a watch on your files and if any change, then it runs the dev command automatically.