Educational - Hubspot Laravel

SCSS Laravel-Mix Compiler

A little introduction

Writing CSS ( Cascading Style Sheets ) is critical to effectively describe how HTML elements must be displayed on a web page to define styles, design, layout, and everything you need to create a stunning website. But when you start working with large, complex sites, you might start to wonder if CSS could be better. If you are having these thoughts, congratulations! Your  SASS  time has come.

What is SASS?

SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful. In some ways, you may think of SASS as a style sheet extension language because it extends the standard CSS characteristics by introducing the benefits of a basic programming language. So SASS will compile your code and generate the CSS output a browser can understand.


https://slite.com/api/files/ZIRm4UJ9E15rpG/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiQXBXX3BQM2FfRHNzWHciLCJpYXQiOjE3NTk3OTA1MTcsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiZFpONnRYeEdkb1ZJX08iLCJleHAiOjE3NjIzODI1MTd9.nTXHfa5cxyXcAdCGrWWCpwSKJ80bMQUGG77h5h7ugUw

Here is where a SCSS compiler comes into action.


Introducing Laravel Mix

What is Laravel Mix?

Laravel Mix, a package developed by Laracasts creator Jeffrey Way, provides a fluent API for defining webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. In other words, Mix makes it a cinch to compile and minify your application's CSS and JavaScript files.


How to start working with Laravel Mix



Step 1. Install Node.Js

If you don't have Node Js installed on your machine, you will need it.


Step 2. 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 3. 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 4. Define Your Compilation

Open webpack.mix.js and add the following code:

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

mix.sass("route-to-client-folder/themes/theme-name/styles/scss/main.scss", "route-to-client-folder/themes/theme-name/styles/css/")


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


More Information:

Laravel Mix Documentation

Step by Step video tutorial.