#sass #svelte #bootstrap-5 #svelte-3
Вопрос:
В этой статье на веб-сайте Svelte говорится: «Компилятор (в случае Svelte) может идентифицировать и удалять неиспользуемые стили. Больше никаких добавлений-только таблицы стилей!»
Существует два варианта загрузки SCSS начальной загрузки:
- Загрузите все их SCSS через
@import 'node_modules/bootstrap/scss/bootstrap'; - Загружайте только то, что вам нужно для поддержки используемых компонентов, чтобы сгенерированный CSS был как можно меньше, как описано здесь.
Устранит ли компилятор Svelte необходимость выполнения #2 выше? Было бы довольно круто, если бы мне не нужно было вдаваться в подробности того, что я использую и не использую в Bootstrap, и при этом получать минимально возможный сгенерированный CSS.
Ответ №1:
Удаление неиспользуемого стиля Svelte происходит на уровне компонентов. Он анализирует селекторы, используемые в <style> теге вашего компонента, и удаляет все, что отсутствует в разметке вашего компонента. Из-за этого, если вы хотите удалить неиспользуемые селекторы начальной загрузки, вам нужно будет импортировать SCSS начальной загрузки в каждый компонент, чтобы компилятор мог проанализировать, какие селекторы используются в этом компоненте. Из — за размера начальной загрузки это не рекомендуется. Это значительно замедлит время сборки, так как компилятор должен анализировать все стили начальной загрузки для каждого компонента. Кроме того, вы получите дублированные стили начальной загрузки для разных компонентов.
Из-за этого я рекомендую добавить Bootstrap в ваш глобальный SCSS и следовать документации Bootstrap по удалению неиспользуемых стилей.