Laravel Mix provides a clean, expressive API over compiling SASS or Less, which are extensions of plain CSS that add variables, mixins, and other powerful features that make working with CSS much more enjoyable. In this document, we will briefly discuss CSS compilation in general; however, you should consult the full Laravel Mix documentation for more information on compiling SASS or Less.
If you would like to remove the frontend scaffolding from your application, you may use the
preset Artisan command. This command, when combined with the
php artisan preset none
package.json file includes the
bootstrap-sass package to help you get started prototyping your application's frontend using Bootstrap. However, feel free to add or remove packages from the
package.json file as needed for your own application. You are not required to use the Bootstrap framework to build your Laravel application - it is simply provided as a good starting point for those who choose to use it.
Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM):
Once the dependencies have been installed using
npm install, you can compile your SASS files to plain CSS using Laravel Mix. The
npm run dev command will process the instructions in your
webpack.mix.js file. Typically, your compiled CSS will be placed in the
npm run dev
webpack.mix.js included with Laravel will compile the
resources/assets/sass/app.scss SASS file. This
app.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the
app.scss file however you wish or even use an entirely different pre-processor by configuring Laravel Mix.
package.json file in the project's root directory. This file is similar to a
By default, the Laravel
package.jsonfile includes a few packages such as
package.jsonfile as needed for your own application.
Once the packages are installed, you can use the
npm run dev command, Webpack will execute the instructions in your
npm run dev
By default, the Laravel
webpack.mix.js file compiles your SASS and the
resources/assets/js/app.js file. Within the
app.jsfile will load the
By default, fresh Laravel applications contain an
ExampleComponent.vue Vue component located in the
resources/assets/js/components directory. The
Vue.component( 'example-component', require('./components/ExampleComponent.vue') );
To use the component in your application, you may simply drop it into one of your HTML templates. For example, after running the
make:auth Artisan command to scaffold your application's authentication and registration screens, you could drop the component into the
home.blade.php Blade template:
@extends('layouts.app') @section('content') <example-component></example-component> @endsection
Remember, you should run the
npm run devcommand each time you change a Vue component. Or, you may run the
npm run watchcommand to monitor and automatically recompile your components each time they are modified.
Of course, if you are interested in learning more about writing Vue components, you should read the Vue documentation, which provides a thorough, easy-to-read overview of the entire Vue framework.
preset command with the
php artisan preset react
This single command will remove the Vue scaffolding and replace it with React scaffolding, including an example component.
© Taylor Otwell
Licensed under the MIT License.
Laravel is a trademark of Taylor Otwell.