Select 2 Webpack-encore

Question

我正在尝试在我的 symphony4 项目中将 select2 与 webpack-encore 结合使用。我的 app.js 文件加载没有问题，但在我安装它时没有选择 2 .. 我不明白为什么它根本不起作用...

我的html

    <head>
    {{ encore_entry_link_tags('app') }}
    {{ encore_entry_script_tags('app') }}
    </head>
    <body>
    <select>
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    </select>

我的app.js

require('../css/app.css');

const $ = require('jquery');





console.log('Hello Webpackfdsfds Encore! Edit me in assets/js/app.js');

require('select2')

$('select').select2({ width: '100%', placeholder: "Select an Option", allowClear: true })

它看起来像什么 https://imgur.com/Wh1zMn8

如果你能帮助我，我将不胜感激

Answer 1

您可以简单地导入带有要求的 select2 CSS :

require('../css/app.css');
const $ = require('jquery');
console.log('Hello Webpackfdsfds Encore! Edit me in assets/js/app.js');

require('select2')
require('select2/dist/css/select2.css')
$('select').select2({ width: '100%', placeholder: "Select an Option", allowClear: true })

它也存在自定义样式，例如：

选择2-bootstrap-主题
选择2-bootstrap4-主题
select2-flat-theme
选择 2-地铁

你可以用 yarn 安装它们。

Select 2 Webpack-encore

Select 2 Webpack-encore

jquery

npm

jquery-select2

symfony4