Compiler SCSS Laravel-Mix

PIC developers use Laravel mix to compile SCSS files


NEEDS TO BE UPDATED

How to use it:



Install node js


In theme folder follow steps from video and this...

npm init -y 
npm install laravel-mix --save-dev
touch webpack.mix.js

After Installing Laravel Mix Run this in the Terminal to watch the changes
npx mix watch

To upload the changes after saving, add this to SFTP config


"watcher":{
          "files":"themes/***/styles/main.css",
          "autoUpload": true,
          "autoDelete": false
          }
Config sFTP to auto upload css file when saving
Config Laravel-Mix to work on all sites at once

EDIT webpack.mix.js

let mix = require("laravel-mix");

//Production
mix.sass("route-to-client-folder/themes/piconsulting-child/styles/scss/main.scss", "route-to-client-folder/themes/piconsulting-child/styles/css/")

//Development
mix.sass("route-to-client-folder/themes/piconsulting-child/styles/scss/main.scss", "route-to-client-folder/themes/piconsulting-child/styles/css/")

// Agile Rising Example Development
mix.sass("development/agile-rising/themes/piconsulting-child/styles/scss/main.scss", "development/agile-rising/themes/piconsulting-child/styles/css/")


STEPS


Stand-Alone Projects

Step 1. Install Mix

Begin by installing Laravel Mix through NPM or Yarn.
mkdir my-app && cd my-app npm init -y npm install laravel-mix --save-dev

Step 2. Create a Mix Configuration File

Next, create a Mix configuration file within the root of your new project.
touch webpack.mix.js
You should now have the following directory structure:
  • node_modules/
  • package.json
  • webpack.mix.js
webpack.mix.js is your configuration layer on top of webpack. Most of your time will be spent here.

Step 3. Define Your Compilation

Open webpack.mix.js and add the following code:
// webpack.mix.jslet mix = require('laravel-mix'); mix.js('src/app.js', 'dist').setPublicPath('dist');
At its core, Mix is an opinionated, fluent API on top of webpack. In the example above, we've instructed Mix to compile src/app.js and save it to the dist/ directory. If you're working along, create src/app.js now, and populate it with a simple alert:
// src/app.jsalert('hello world');
Of course this is only a placeholder for your actual JavaScript code.

Step 4. Compile

We're now ready to bundle up our assets. Mix provides a command-line program called mix which triggers the appropriate webpack build. Give it a run now.
npx mix
Congrats! You've created your first bundle. Create an HTML file, load your script, and you'll see an alert when the page loads.




SFTP CONECTIONS

[{
    "name": "Oeler DEV",
    "host": "oelerdev.sftp.wpengine.com",
    "protocol": "sftp",
    "port": 2222,
    "username": "oelerdev-ramiro",
    "remotePath": "/wp-content",
    "password": "*****",
    "uploadOnSave": true,
    "context": "_development/oeler/",
    "watcher":{
        "files":"themes/piconsulting-child/styles/css/main.css",
        "autoUpload": true,
        "autoDelete": false
        }
},
{
    "name": "Oeler LIVE",
    "host": "oeler.sftp.wpengine.com",
    "protocol": "sftp",
    "port": 2222,
    "username": "oeler-ramiro",
    "password": "*****",
    "remotePath": "/wp-content",
    "uploadOnSave": true,
    "context": "_production/oeler/",
    "watcher":{
        "files":"themes/piconsulting-child/styles/css/main.css",
        "autoUpload": true,
        "autoDelete": false
        }
}
]



MINIFIYER

In package.json add

"watch-production": "mix --production -- --watch --progress",

and in the console run
npm run watch-production