Как оптимизировать загрузку, чтобы избежать рендеринга неиспользуемого кода CSS

Question

Мы работаем над MVP в vue.js, и мы решили использовать bootstrap для согласованного стиля элемента.

Теперь мы начинаем добавлять скин / тему в наше одностраничное приложение, и мы обнаружили проблему с CSS, отображаемым на странице.

Нам удалось переопределить стили с помощью селекторов CSS с более высокой специфичностью, но мы хотели бы оптимизировать выходной код, отображаемый в браузере, удалив неиспользуемый "базовый" код начальной загрузки css.

Вопрос:

Как мы можем настроить нашу среду, чтобы заставить загрузочный код sass выводить чистый и не избыточный код CSS?

подробности:

1. Bootstrap загружает собственный _buttons.scss файл
2. Мы загружаем наш собственный файл "theme" _buttons.scss после файла начальной загрузки, и нам удалось получить наш css с более высокой специфичностью.
3. Запускаем компилятор sass-кода (на node-sass)
4. Вывод css содержит ОБА стиль начальной загрузки и наш собственный тематический стиль для кнопок. (Как пример, смотрите следующий скриншот)

Как вы можете видеть, наш собственный стиль кнопок применяется по назначению, но мы все еще переносим оригинальный стиль начальной загрузки.

---

Мы бы хотели, чтобы наш стиль отображался только в браузере.

---

Обновление:

Пользовательский интерфейс, над которым я работаю, использует некоторые классы прямо из начальной загрузки, и, очевидно, некоторые классы, характерные для нашего собственного приложения.

Иногда эти классы необходимы для переопределения стилей загрузки по умолчанию.
Нам нужно переопределить не только цвета (которые можно настроить с помощью _variables.scss), но также некоторые другие атрибуты CSS.

Мы сталкиваемся с проблемой дублирования кода CSS, отображаемого в браузере, где применяется наш собственный стиль, а также сгенерированный стиль начальной загрузки по умолчанию, который никогда не будет применяться, поскольку он имеет низкую специфичность.

Интересно, есть ли способ избежать компиляции кода sass, который не нужно отображать в браузере, и в то же время избегать "трогать" код начальной загрузки в ./node_modules/.

Answer 1

Вот как вы переопределяете значения по умолчанию для Bootstrap (4.x).

Изучите источник

Сначала загляните внутрь bootstrap.scss , где вы можете увидеть, как создается структура, компонент за компонентом. Вы можете, если хотите, закомментировать дополнительные компоненты, которые вам не нужны, чтобы уменьшить Boostrap. Но не делай этого прямо сейчас.

Далее загляните внутрь _variables.scss . Просмотрите этот файл, и должно быть ясно, что все настраиваемые стили Bootstrap определены здесь, включая цвета. Таким образом, вы можете применить свои собственные цвета не только для кнопок, но и ко всей структуре. Опять же, вы могли бы начать изменять переменные, которые вы хотите здесь, прямо сейчас ... но не делайте этого, поскольку существует наилучшая практика.

Создать файл настроек

Вместо редактирования исходного источника создайте новый исходный файл, который мы назовем myproject.scss , где-то, кроме папки с исходным кодом Bootstrap. Сохраняя все изменения отдельно, мы облегчаем любые будущие обновления Bootstrap.

Добавить переменные переопределения

Теперь вы можете начать копирование переменных, которые вы хотите изменить. Обратите внимание, что переменные в _variables.scss имеют флаг !default, что означает, что они могут быть переопределены в другом месте. Например, если вам нужен другой вторичный цвет, вы обнаружите, что он определен как $secondary, и поэтому добавьте его в myproject.scss с новым значением:

$secondary: #dd5679;

Добавьте столько переменных, сколько хотите.

Import Bootstrap

После этого импортируйте Bootstrap в файл. ЛИБО возьмите bootstrap.scss оптом:

@import "relative/path/to/bootstrap/bootstrap";

ИЛИ скопируйте и вставьте содержимое bootstrap.scss , обновите пути и закомментируйте компоненты, которые вам не нужны:

@import "relative/path/to/bootstrap/functions";
@import "relative/path/to/bootstrap/variables";
@import "relative/path/to/bootstrap/mixins";
...
// @import "relative/path/to/bootstrap/popover";
// @import "relative/path/to/bootstrap/carousel";
@import "relative/path/to/bootstrap/utilities";
@import "relative/path/to/bootstrap/print";

Первые 3 импорта: «функции», «переменные» и «миксины» являются основными, а не дополнительными компонентами; не исключайте их.

Добавить стили проекта

После этого добавьте свои собственные стили. Если у вас есть значительное количество, организуйте их в свои отдельные файлы, например, _mybuttons.scss (начинайте имена частичных файлов с подчеркивания) и импортируйте их.

@import "mybuttons";

Ваш исходный файл Bootstrap теперь готов.

Компилировать в CSS

Полученный файл myproject.css - это то, что вы хотите загрузить вместо исходного CSS-файла Bootstrap.