Question

我使用laravel mix（webpack）来编译我的项目。尝试添加光滑的carousel插件但收到错误：Uncaught TypeError: $(...).slick is not a function。我在.copy()文件中使用webpack.mix.js方法从node_modules目录复制到公共目录：

.copy('node_modules/jquery/dist/jquery.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/css')

所有文件都成功出现在正确的公共目录中，这些文件可以在“源”选项卡中看到（在浏览器检查器中）。

在插入光滑的样式后，然后jquery（尝试了几个版本），然后在html头中的slick.js。我甚至使用过cdn urls。如果我在没有laravel混合的情况下做同样的事情，那么光滑的一切都可以。

它不起作用，我无法理解错误。请帮忙！

Answer 1

尝试更改如下：

.copy('node_modules/jquery/dist/jquery.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/assets/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/assets/css')

参考：https://new.laravel.su/docs/5.4/mix

Answer 2

首先npm install slick-carousel

如果您正在使用副本，那么

mix.copy('node_modules/slick-carousel/slick', 'public/assets/slick');

或者您可以手动复制粘贴

在.html档案

中

<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>

Laravel Mix + Slick Carousel

2 个答案: