Laravel Mix 提供了定义 Webpack 构建步骤的 API,用于在应用中使用常见的 CSS 和 JavaScript 预处理器。通过链式调用这些简洁方法,可以流畅地定义资源管道。
但是官方手册却没有详细的说明我们通过npm下载的插件包,要怎么通过Webpack打包到应用的CSS和JavaScript中,下面介绍一下具体流程,以安装bootstrap-fileinput为例:
1.首先我们运行mix监听资源变化
npm run watch
2.通过npm安装bootstrap-fileinput:
npm install bootstrap-fileinput
执行命令后,bootstrap-fileinput会被下载到项目的node_modules文件夹中
3.引入bootstrap-fileinput.js
我们打开resources/js/app.js,加入以下代码:
require('bootstrap-fileinput')
4.引入bootstrap-fileinput.css
我们打开resources/sass/app.sass,加入以下代码:
@import '~bootstrap-fileinput/scss/fileinput';
到此我们就完成了Laravel mix引用npm下载的插件,刷新前台页面后就会发现app.js和app.css中已经编译包含了bootstrap-fileinput的js和css文件。
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Laravel mix怎么引用npm下载的插件?》
文章链接:https://www.liuzhanwu.com/3473.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
文章名称:《Laravel mix怎么引用npm下载的插件?》
文章链接:https://www.liuzhanwu.com/3473.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
相关推荐
456CDN:为网络安全与加速保驾护航,CDN测评推荐
456CDN:高防CDN,200GB DDoS防护,无视CC,1TB流量@50Mbps带宽,500元/月,安全加速,智能守护,稳定安全
#618大促#最后一天|凌霞软件旗下新一代服务器面板 1Panel:永久授权 539元起,10台4900元,即买即赠SSL证书
#618大促#最后一天|凌霞软件旗下强大易用的建站工具 Halo:永久授权 660元起,10台6000元,即买即赠SSL证书
#6.18促销#Themebetter:WordPress主题特惠7折,DUX主题折后559元,不限制域名授权数目
耗子Linux 面板:又一个轻量 Linux 服务器运维管理面板
#11.11#Themebetter:年度大放价,全场6折特惠,DUX主题折后480元,不限制域名授权数目
紧急提醒:DediPath官宣跑路