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.js
file 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: as a developer this gives no information about the actual sass file you are using.
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.
With the addition of processCssUrls
to 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.
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: