Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to use mix in laravel", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use mix in laravel" this article.

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

This article operating environment: Windows10 system, Laravel6 version, Dell G3 computer.

Install laravel mix

Laravel Mix is a front-end task automation management tool, which uses the mode of workflow to execute the established tasks in turn. Mix provides a concise 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 easy. First, you need to install npm dependencies using the following command. We will use Yarn to install dependencies. Before that, we also need to install acceleration for Yarn configuration due to domestic network reasons:

Yarn config set registry https://registry.npm.taobao.org

Install dependencies using Yarn:

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

The purpose of adding SASS_BINARY_SITE= http://npm.taobao.org/mirrors/node-sass before the yarn command is to tell yarn to go to Taobao's image to download the node-sass binaries.

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 ()

A version () is added at the end so that each static file generated by Mix is followed by a parameter similar to the version number 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%;}.

Run npm run watch-poll, and then generate the css,js file.

View call

Version control

Mix also generates the file public/mix-manifest.json, which does not need to be added to the version library, which is added in .gitignore.

/ public/js and / public/css are generated dynamically, so ignore is also added.

Modify the * * .gitignore * * file:

/ public/mix-manifest.json/public/js/public/css above is all the content of this article "how to use mix in laravel". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.