Custom WordPress Theme Development (2022) #21 - How to add Sass to your custom wordpress theme .
How to install Laravel and Sass super style sheets , for wordpress custom php theme.I forgot to mention to enqueue the scss and js files in the beginning of the video.
Prequisties
1.NodeJS. (For Windows , Mac and , Linux)
LINK: https://nodejs.org/en/download/
Check Node Version and npm version
```
node -v
npm -v
```
2. Laravel Mix (Instllation is described below do it after initiliazing your package.json file)
LINK: https://laravel-mix.com/docs/6.0/inst...
3. Your Custom wordpress theme of choice
Git Commit = https://github.com/andgo-edu/bootstra...
Full Github Project free
Link : https://github.com/andgo-edu/bootstra...
***************Steps ***************
1. Enequeue the new style sheet and js where are going to create them
Add this to where you registered your styles and js in your wordpress custom theme
```
//Dynamic page showing style on save dir
wp_enqueue_style('app.css', get_template_directory_uri() . '/dist/dist/app.css', [], 1, 'all');
/*Enqueue laravel scss styles end */
```
2. Initiliaze pacakge.json file
inside your root folder open a terminal and
```
npm init -y // starts a new package.json
npm install laravel-mix --save-dev
```
3 .Install laravel mix using
```
npm laravel-mix --save-dev
```
4. in your pacakage.json
change scripts to
```
"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"
}
```
this script was added to be able to run npx mix watch
5.Create these 2 new files (webpack.mix.js, webpack.config.js(in your root folder
webpack.mix.js
```
const mix = require('laravel-mix');
mix.js('src/dist/app.js','dist').sass('src/dist/app.scss', 'dist').setPublicPath('dist');
```
webpack.config.js
```
Get the code for webpack.config.js from my gitrepository couldnt add it here
```
6. do npm install again to make sure everything is configured correctly
```
npm install
```
7. npm run watch
and start adding sass styles
https://laravel-mix.com/docs/6.0/inst...