Webpack — Configure Laravel-mix

To get traditional CSS to be parsed by browsers, regardless of the Sass syntax used (SASS or SCSS), you need to compile the Sass files and transform them into CSS files.

Laravel-mix provides us with a pre-configured webpack.mix.jsfile to get us up and running as quickly as possible.

First, we need to install node.js and npm.

· Install Node.js

Download node.js from the official website nodejs.org, open the package and follow the wizard.

· Initialize NPM

NPM is the Node Package Manager for JavaScript. NPM makes it easy to install and uninstall third party packages. To initialize a Sass project with NPM, open your terminal and CD (change directory) to your project folder.

Once in the correct folder, run the command.

npm init

You will be prompted to answer several questions about the project, after which NPM will generate a package.json file in your folder.

· Install Laravel-mix

npm i laravel-mix

Open webpack.mix.js and require laravel-mix

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

Now, let’s configure our mix.

mix.sass(‘resources/assets/sass/app.scss’, ‘public/css’)

The sass method allows you to compile Sass into CSS. The first parameter is the source file, and the second is the destination path.

mix.js(‘resources/assets/js/app.js’, ‘public/js’) .extract([‘jquery’, ‘bootstrap’])

The js method compile javascript files while the extract method extracts all your vendor libraries into their own file. Here, we are extracting jQuery and Bootstrap.

mix.browserSync({ proxy: ‘my-domain.test’ })

You enter your domain as a proxy, and whenever you have changes in your code, The browserSync injects these changes into the browser without requiring a manual refresh.

mix.sourceMaps()

This will provide extra debugging information to your browser’s developer tools.

style.css file, line 2595

style.css file, line 2595: as a developer this gives no information about the actual sass file you are using.

_buttons.scss file, line 8

enabling SourceMaps gets you the exact line and file of your code.

mix.options({ processCssUrls: false })

By default, Laravel Mix and Webpack will find example.png, copy it to your public/images folder, and then rewrite the url() within your generated stylesheet.

webpack rewrites image url()

With the addition of processCssUrlsto your webpack.mix.js file, Mix will no longer match any url() or copy assets to your public directory.

This means that the compiled CSS will look just like how you originally typed it.

webpack using option processCssUrls: false

We now finished our configuration, go ahead and open your terminal and let’s run our mix.

npm run dev

This command will run all Mix tasks.

npm run watch

This command will continue running in your terminal and watch all relevant files for changes. Webpack will then automatically recompile your assets when it detects a change.

npm run production

This command will run all Mix tasks and minify the output.

Wrap up

Thank you for reading!

I hope you found this article helpful and insightful. I would appreciate your applause and sharing :-)

For more articles, check out the links below:

• SASS, Bootstrap, Webpack — Create your first website
• SASS — Learn the fundamentals
• Flexbox — Understand how it works
• Differentiate REM vs EM vs PX