Home > PHP Framework > Laravel > body text

What is the usage of mix in laravel

WBOY
Release: 2022-01-13 17:16:03
Original
3089 people have browsed it

In laravel, "laravel mix" is a front-end task automation management tool. Mix provides a simple and smooth API that can define Webpack compilation tasks for Laravel applications. Mix supports many CSS and JavaScript preprocessors. Front-end resources can be managed through calls.

What is the usage of mix in laravel

#The operating environment of this article: Windows 10 system, Laravel version 6, Dell G3 computer.

What is the usage of mix in laravel

Install laravel mix

Laravel Mix is ​​a front-end task automation management tool. The workflow model is used to execute the specified tasks in sequence. Mix provides a simple and smooth API that allows you to define Webpack compilation tasks for your Laravel applications. Mix supports many common CSS and JavaScript preprocessors, and you can easily manage front-end resources with simple calls.

Using Mix is ​​very simple. First, you need to use the following command to install npm dependencies. We will use Yarn to install dependencies. Before that, due to domestic network reasons, we also need to configure installation acceleration for Yarn:

yarn config set registry https://registry.npm.taobao.org
Copy after login

Use Yarn to install dependencies:

SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn
Copy after login

Before the yarn command The purpose of adding SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass is to tell yarn to download the node-sass binary file from the Taobao mirror.

Use laravel mix

Modify the webpack.mix.js file.

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version();
Copy after login

A version() is added at the end so that a parameter similar to the version number is added after each static file generated by Mix to avoid browser caching.

Modify the resources/sass/app.scss file

// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
/* universal */
body {
  font-family: Hiragino Sans GB, "Hiragino Sans GB", Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}
/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}
……
Copy after login

Run npm run watch-poll, and then css and js files will be generated.

view calls

<link href="{{ mix(&#39;css/app.css&#39;) }}" rel="stylesheet">
Copy after login

version control

Mix also generates the file public/mix-manifest.json, which does not need to be added to the repository, in .gitignore Add it in.

/public/js and /public/css are dynamically generated, so they are also ignored.

Modify ** .gitignore ** File:

/public/mix-manifest.json
/public/js
/public/css
Copy after login

Related recommendations: The latest five Laravel video tutorials

The above is the detailed content of What is the usage of mix in laravel. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template