How to Use Laravel Mix SCSS Compiler

Writing CSS (Cascading Style Sheets) is critical to effectively creating a stunning website. But when you start working with large, complex sites, you might start to wonder if CSS could be better. This is where SASS comes in. 

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.

Here is where an SCSS compiler comes into action.

Introducing 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.

https://nodejs.org/en/

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 5. 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