Неправильный CSS в VueJS в производстве
Если вы разрабатываете приложение VueJS, вы могли столкнуться со следующей проблемой: ваши стили CSS отлично работают при разработке; но после сборки проекта некоторые стили неверны или отсутствуют.
Со мной такое случалось несколько раз, и я хочу избавить вас от неприятностей в этой статье.
Наивный подход
Иногда вам нужно настроить класс CSS, прикрепленный к элементу. В моем примере у меня были события с другим статусом (например, «подтверждено» и «отменено»). У каждого статуса свой стиль.
Я наивно пошел своей дорогой и набрал:
Обратите внимание, как я использую строковую интерполяцию в элементе ‹div› для динамического изменения класса CSS в зависимости от eventStatus.
И это хорошо работало при разработке на моей машине. Подтвержденные события отображаются зеленым цветом (т. Е. Имеют класс статус-подтвержден), а отмененные события отображаются серым цветом (т. Е. Имеют класс статус-отменен).
НО он сломался в моей производственной сборке! По сути, все мероприятия не имели стилизации. Что происходило?
Почему
Если вы знаете, как vue-cli-service создает рабочую версию вашего веб-приложения, вы быстро поймете мою ошибку. Потому что «vue-cli-service build» шифрует имена классов CSS. Это особенно верно, если вы ограничили свой CSS - и это хорошо, потому что таким образом вы случайно не унаследуете стили CSS из других частей своего кода. НО создание классов CSS таким динамичным способом, как мы, не распознается этой магией сборки!
Решение
Простое решение - использовать рекомендуемый (и более чистый) способ динамического определения классов CSS в VueJS:
Обратите внимание, что теперь я НЕ использую строковую интерполяцию непосредственно в элементе ‹div›. Вместо этого я использую интерполяцию в коде Javascript компонента. Только получившаяся строка затем используется в элементе ‹div›. (Кстати: вы также можете использовать такой объект, как {status -formed: true, status-cancelled: false}).
И это прекрасно работает! Это также работает, если вы используете CSS с областью видимости. Потому что теперь процесс сборки либо шифрует полное имя метода (что нормально), либо вообще ничего (что тоже нормально). В моей первоначальной наивной реализации процесс сборки скремблировал только часть идентификатора класса CSS и в итоге получил то, на что он не мог ссылаться в другом месте моего кода.
Поэтому при использовании динамических классов CSS не используйте интерполированные строки в атрибуте class элементов HTML. Лучше используйте метод, который генерирует имя вашего динамического CSS-класса.
Надеюсь это поможет! Ваше здоровье!
