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

Question

我尝试在我的项目上安装 select2，但效果不佳。这与 link 完全相同的问题：

但我不使用 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',
    ])

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

Select2 doesn't render nice, style is broken

javascript

css

frontend

render

jquery-select2