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 文件。
声明:1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。







