如何在Laravel中使用从npm安装的包

Question

抱歉问这么简单的问题。我完全不懂包管理器，特别是npm。通常，我会将CSS/Scripts链接到CDN上。

在这种情况下，我正在编写一个Laravel应用程序，需要更高级的，所以我决定尝试bootstrap-select，它符合我的要求。在尝试npm或composer之前，我尝试了CDN方式，但缺少了一个文件，所以它没有起作用。在文档中，有几种安装方法，其中一种是通过npm：npm install bootstrap-select 其他将通过composer进行： composer require snapappointments/bootstrap-select 安装完成后，我检查了我的/vendor文件夹，确实有一个名为snapappointments的文件夹和其中的几个子文件夹。 那么...现在怎么办？ 我如何将我的CSS链接到这个新安装的包？脚本也是同样的方法吗？

- luisfer

Answer 1

这种方法是在运行命令npm install bootstrap-select后使用npm。

然后进入/resources/assets/sass/app.scss导入SCSS文件。 您可以像这样导入：@import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss"; 之后，您还需要添加js文件，转到此路径： resources/assets/js/app.js 并像这样导入js文件：require('../../../node_modules/bootstrap-select/dist/js/bootstrap-select');

最后: 运行以下命令npm run watch或npm run dev以生成已编译的css&js文件

npm run watch将在每次保存时编译您的文件 npm run dev则按时编译您的文件

然后使用asset帮助程序函数将其导入到您的应用程序中。

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app,js') }}"></script>

- Joseph

---

在app.js中添加JS模块时，您可以使用~作为node_modules目录位置的同义词。因此，require可以更简单：require('~bootstrap-select/dist/js/bootstrap-select');。 - Augusto Moura

@AugustoMoura，那对我没用。我必须像Joseph最初说的那样指定完整的URI。 - kregus