Select2 плохо отображает, стиль нарушен
Я попытался установить select2 в свой проект, но это не очень хорошо. Это точно такая же проблема, как и по этой ссылке: Select2 не отображается должным образом
Но я не использую cdn, я работаю над проектом symfony4 (с бисом и пряжей webpack). Я импортирую 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>
У меня нет ошибок, но рендер ни на что не похож!
Спасибо за вашу помощь :)
да, это работает, но я бы хотел избежать cdn. он работает с <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">. Но почему импорт, который я сделал, не работает?
У вас есть другие файлы .js, импортирующие файлы .css, которые работают? Потому что вопрос в том, что, вероятно, вам нужен css в вашем html, а не в js. поэтому он работает, когда вы загружаете его прямо в html, а не в .js
а также почему следует избегать <link href=...>? это наиболее эффективный / производительный способ загрузки файла css
Да, я использую bootstrap3 с настраиваемым классом. У меня есть main.css со всем необходимым внутри. Для js у меня только один файл.
Я хотел избежать, просто попробовать другой путь. Действительно, я мог бы использовать cdn, но он все равно должен работать: D
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Спустя много месяцев я оптимизировал свой веб-сайт и исправил эту проблему, а затем хотел поделиться советом!
@CalvinNunes, вы были правы, я импортировал CSS в js. Импорт css через webpack.config.js работает лучше.
Я добавил эту запись в webpack.config.js и, конечно же, удалил импорт css из моего файла app.js
.addStyleEntry('css/account', [
'select2/dist/css/select2.css',
'select2-bootstrap4-theme/dist/select2-bootstrap4.css',
])
не могли бы вы попробовать добавить стиль импорта «cdn» в свой html, чтобы посмотреть, работает ли он?