Select 2 Webpack-encore

Question

I'm trying to use select2 with webpack-encore on my symphony4 project.我正在尝试在我的 symphony4 项目中使用 select2 和 webpack-encore。 My app.js file is loaded without problem but not select2 while i installed it.. I do not understand why it's not working at all...我的 app.js 文件加载没有问题，但在我安装它时没有 select2.. 我不明白为什么它根本不工作......

My html我的 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>

My app.js我的 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 })

What it looks like https://imgur.com/Wh1zMn8它看起来像什么https://imgur.com/Wh1zMn8

I would be grateful if you would help me如果你能帮助我，我将不胜感激

Answer 1

You can simply import the select2 CSS with a require:您可以简单地导入 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 })

It also exists custom styles, like:它还存在自定义 styles，如：

select2-bootstrap-theme select2-bootstrap-主题
select2-bootstrap4-theme select2-bootstrap4-主题
select2-flat-theme select2-平面主题
select2-metro select2-地铁

You can install them with yarn.您可以使用纱线安装它们。

Select 2 Webpack-encore

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-01-03 13:46:01

Select 2 Webpack-encore

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-01-03 13:46:01

解决方案1
1 已采纳 2020-01-03 13:46:01