javascript - Select2 呈现效果不佳，样式已损坏

Question

我尝试在我的元素上安装 select2 但它渲染效果不佳。这与此链接完全相同的问题:Select2 doesn't render properly

但我不使用 cdn，我在 symfony4 元素上工作(使用 webpack encore 和 yarn)。我像这样导入 jquery 和 select2 :

app.js

import $ from 'jquery';
import 'select2/dist/js/select2.full';
import 'select2/dist/css/select2.css';

$(document).ready(function () {
    $('.select2').select2();
})

我也试试这个:

import $ from 'jquery';
import select2 from 'select2';

mypage.html

<select class="select2 form-control" style="width:200px;" name="states[]" multiple="multiple">
    <option value=""><option>
    <option value="1">Mustard</option>
    <option value="2">Ketchup</option>
    <option value="3">Relish</option>
</select>

我没有错误，但渲染看起来什么都没有!

感谢您的帮助:)

Answer 1

几个月后，我优化了我的网站并解决了这个问题，然后我想分享技巧!

@CalvinNunes 你是对的，我在 js 中导入了 css。通过 webpack.config.js 导入 css 效果更好。

我在 webpack.config.js 中添加了这个条目，当然我从我的 app.js 文件中删除了 css 导入

.addStyleEntry('css/account', [
        'select2/dist/css/select2.css',
        'select2-bootstrap4-theme/dist/select2-bootstrap4.css',
    ])