Along with backend API's, artisan commands & all other stuff, if you have frontend built within Laravel application then for sure you will need some sort of CSS pre-processor & something to compile and bundle your assets.
Here is the official documentation.
mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');
You will love laravel mix if you are new to the webpack & you wanted to use bundling and asset compilation.
Laravel Mix Installation & Setup
Before triggering Mix, you must first ensure that Node.js and NPM are installed on your machine.(Laravel Homestead includes everything you need be default)
Within a fresh installation of Laravel, you'll find a
package.json file in the root of your directory structure. The default
package.json file includes everything you need to get started. You just have to run
Running Laravel Mix
To run your Mix tasks you only need to execute one of the NPM scripts that is included with the default Laravel
// Run all Mix tasks... npm run dev // Run all Mix tasks and minify output... npm run production
Watching Assets For Changes
npm run watch 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 watch
You may find that in certain environments Webpack isn't updating when your files change. If this is the case on your system, consider using the watch-poll command:
npm run watch-poll
Working With Stylesheets in Laravel Mix
webpack.mix.js file is your entry point for all asset compilation. Think of it as a light configuration wrapper around Webpack. Mix tasks can be chained together to define exactly how your assets should be compiled.
Less with Laravel Mix
less method may be used to compile Less into CSS. Let's compile our primary
app.less file to
Multiple calls to the
less method may be used to compile multiple files:
mix.less('resources/less/app.less', 'public/css') .less('resources/less/admin.less', 'public/css');
If you wish to customize the file name of the compiled CSS, you may pass a full file path as the second argument to the
Sass with Laravel Mix
sass method allows you to compile
Sass into CSS. You may use the method like so:
Stylus with Laravel Mix
Similar to Less and Sass, the
stylus method allows you to compile
Stylus into CSS:
Use Plain CSS with Laravel Mix
If you would just like to concatenate some plain CSS stylesheets into a single file, you may use the
With this single line of code, you may now take advantage of:
- ES2015 syntax.
- Compilation of
- Minification for production environments.
vendor.js file. Mix's
extract method makes this a breeze:
mix.js('resources/js/app.js', 'public/js') .extract(['vue'])
extract method accepts an array of all libraries or modules that you wish to extract into a
vendor.js file. Using the above snippet as an example, Mix will generate the following files:
public/js/mainfest.js: The Webpack manifest runtime
public/js/vendor.js: Your vendor libraries
public/js/app.js: Your application code
Using Environment Variables with Laravel Mix
You may inject environment variables into Mix by prefixing a key in your
.env file with
After the variable has been defined in your
.env file, you may access via the
process.env object. If the value changes while you are running a
watch task, you will need to restart the task:
You can modify
webpack.config.js file for changes in your configurations.