[英]Can't add masonry to symfony 6 webpack-encore project
I'm working on a symfony 6 project and i'm trying to use webpack encore to add masonry grid.我正在处理一个 symfony 6 项目,我正在尝试使用 webpack encore 添加砌体网格。
I'm using this documentation: masonry.desandro.com我正在使用此文档: masonry.desandro.com
I'm using yarn to add masonry-layout我正在使用纱线添加砌体布局
yarn add masonry-layout
my webpack config:我的 webpack 配置:
...
.autoProvideVariables({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
My app.js我的应用程序.js
// You can specify which plugins you need
import 'bootstrap';
// import { Tooltip, Toast, Popover } from 'bootstrap';
// start the Stimulus application
import './bootstrap';
const $ = require('jquery');
import * as masonry from 'masonry-layout';
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 160
});
My index.html.twig我的索引.html.twig
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width3"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
</div>
I'm always getting this error:我总是收到此错误:
Uncaught TypeError: r(...)(...).masonry is not a function
未捕获的类型错误:r(...)(...).masonry 不是 function
How can i correctly add masonry using webpack?如何使用 webpack 正确添加砌体?
The documentation states:文件指出:
To use Masonry as a jQuery plugin with Webpack, you need to use jQuery Bridget
要将 Masonry 作为 jQuery 插件与 Webpack 一起使用,您需要使用 jQuery Bridget
See: https://masonry.desandro.com/extras.html参见: https://masonry.desandro.com/extras.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.