Laravel mix 怎么引用 npm 下载的插件?

2023-08-27 4473阅读 0评论
首页 » 资源 » 技术 » 正文

Laravel mix 怎么引用 npm 下载的插件?

Laravel Mix 提供了定义 Webpack 构建步骤的 API,用于在应用中使用常见的 CSS 和 JavaScript 预处理器。通过链式调用这些简洁方法,可以流畅地定义资源管道。

Laravel mix 怎么引用 npm 下载的插件? 第1张

但是官方手册却没有详细的说明我们通过 npm 下载的插件包,要怎么通过 Webpack 打包到应用的 CSS 和 JavaScript 中,下面介绍一下具体流程,以安装 bootstrap-fileinput 为例:

1.首先我们运行 mix 监听资源变化

npm run watch
1
  npm run watch

2.通过 npm 安装 bootstrap-fileinput:

npm install bootstrap-fileinput
1
  npm install bootstrap-fileinput

执行命令后,bootstrap-fileinput 会被下载到项目的 node_modules 文件夹中

3.引入 bootstrap-fileinput.js

我们打开 resources/js/app.js,加入以下代码:

require('bootstrap-fileinput')
1
  require('bootstrap-fileinput')

4.引入 bootstrap-fileinput.css

我们打开 resources/sass/app.sass,加入以下代码:

@import '~bootstrap-fileinput/scss/fileinput';
1
  @import '~bootstrap-fileinput/scss/fileinput';

到此我们就完成了 Laravel mix 引用 npm 下载的插件,刷新前台页面后就会发现app.js 和app.css 中已经编译包含了 bootstrap-fileinput 的 js 和 css 文件。

 


免责声明
1、本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明。
2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所
提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何
损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务,本网站概不负责,亦不负任何法律责任。
4、本网站所刊发、转载的文章,其版权均归原作者所有,如其他媒体、网站或个人从本网下载使用,请在
转载有关文章时务必尊重该文章的著作权,保留本网注明的“稿件来源”,并白负版权等法律责任。

手机扫描二维码访问

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,4473人围观)

还没有评论,来说两句吧...

目录[+]