Select2 渲染不好，样式坏了答案

【问题标题】：Select2 doesn't render nice, style is brokenSelect2 渲染不好，样式坏了
【发布时间】：2018-10-05 05:19:40
【问题描述】：

我尝试在我的项目上安装 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>

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

感谢您的帮助:)

【问题讨论】：

你能不能尝试在你的html中添加'cdn'导入样式看看它是否有效？
是的，它正在工作，但我想避免使用 CDN。它正在使用<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">。但是为什么我所做的导入不起作用？
您是否还有另一个正在导入 .css 文件的 .js 文件？因为问题可能是，您需要 html 中的 css，而不是 js。这就是为什么当你直接在 html 中而不是在 .js 中加载它时它可以工作
还有，为什么要避免<link href=...>？这是加载 css 文件的最有效/最有效的方式
是的，我正在使用带有自定义类的 bootstrap3。我有一个main.css，里面有我需要的所有东西。对于 js，我只有一个文件。

标签： javascript css frontend render jquery-select2

【解决方案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',
    ])

【讨论】：