Laravel development: How to use Laravel Mix with CSS and JavaScript?

Laravel Mix is ​​part of the Laravel web application development framework, which provides simplified processing of CSS and JavaScript. Laravel Mix is ​​based on Webpack and provides a unified API that allows developers to easily handle CSS, JavaScript and other assets.

This article will introduce the basics of Laravel Mix and show how to use Laravel Mix to handle CSS and JavaScript through examples.

Install Laravel Mix

Before installing Laravel Mix, we must install Node.js and npm. After the installation is complete, use npm to install Laravel Mix and related dependencies.

We can use the following command to install Laravel Mix in the root directory of the Laravel application:

npm install laravel-mix --save-dev

After the installation is complete, we can install it in the package.json file See the version information of Laravel Mix and related dependencies. In addition, we can also find the source code of Laravel Mix in the node_modules/laravel-mix directory.

Configuring Laravel Mix

Laravel Mix is ​​designed to be an easy-to-use tool. The default configuration file of Laravel Mix is ​​webpack.mix.js, where we can write simple code to compile our CSS and JavaScript.

Here is an example of compiling CSS using Laravel Mix:

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

mix.styles([
    'resources/css/app.css',
    'resources/css/extra.css'
], 'public/css/all.css');

What does this example do?

First, we need to use the require function to introduce Laravel Mix. Then, we use the mix constants to call the Laravel Mix API. The mix.styles() method compiles the CSS file and outputs it to public/css/all.css.

We can specify multiple CSS files and merge them into one file. We can also use the mix.sass() method to compile Sass files, the mix.less() method to compile Less files, and so on.

Here is an example of compiling JavaScript using Laravel Mix:

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

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/extra.js', 'public/js');

This example is derived from resources/js/app.js and resources/js/extra. jsCompiles JavaScript files and outputs them to the public/js directory.

We can also use the mix.react() method to compile ReactJS files, the mix.vue() method to compile Vue.js files, and so on.

Like CSS, we can define multiple JavaScript files in the mix.js() method to merge them into one JS file.

Here is an example of cross-referencing JavaScript and CSS files in Laravel Mix:

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

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .styles([
        'public/css/app.css',
        'public/css/extra.css'
    ], 'public/css/all.css')
   .scripts([
        'public/js/app.js',
        'public/js/extra.js'
    ], 'public/js/all.js');

In this example, we first compile using the mix.js() method JavaScript files. Then, we use the mix.sass() method to compile the Sass file and output it to the public/css directory.

Next, we use the mix.styles() method to combine public/css/app.css and public/css/extra.cssMerge into a CSS file and output it to public/css/all.css.

Finally, we use the mix.scripts() method to combine public/js/app.js and public/js/extra.js Merge into a JS file and output it to public/js/all.js.

It should be noted that we should manage CSS and JavaScript files separately as much as possible. This way we can more easily manage and fine-tune our assets without affecting other assets.

Compile Assets

After writing the code in the webpack.mix.js file, we can use the following command to compile the Assets:

npm run dev

The above command Webpack will be run and the compiled CSS and JavaScript files will be output to the public/css and public/js directories.

If we want to build in production mode when compiling Assets, we can use the following command:

npm run production

This command will optimize the size of the Assets file and delete unused Assets.

Conclusion

In this article, we covered the basics of Laravel Mix. We learned how to use Laravel Mix to simplify working with CSS and JavaScript files. Using Laravel Mix, we can easily compile our CSS and JavaScript files and better manage and optimize our Assets.

Fortunately, Laravel Mix is ​​built into the Laravel web application. This makes it easier for us to use Laravel Mix without worrying about the complexity of building pipelines.

The above is the detailed content of Laravel development: How to use Laravel Mix with CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!