Где мои css классы в производственной версии style-componets

Question

Как гласит заголовок, мне нужно понять, где styled-components связывает css в производственном выпуске.

Я думаю, что это сводится к моему отсутствию понимания о том, как на самом деле работают styled-компоненты. У меня сложилось впечатление, что он объединяет все стили и вводит их в голову. Когда я запускаю локально, я вижу тег стиля в своей голове, а когда раскрываю его, я вижу css имена классов.

Однако в производственной сборке он все еще имеет тег стиля в голове, но он пуст. Например:

Странно то, что при удалении этого тега стиля из производственной сборки все мои стили исчезают, например:

Как можно удалить мои стили, если в теге ничего нет?

Причина, по которой я спрашиваю, заключается в том, что я пытаюсь интегрироваться с LivePerson, чтобы наша служба поддержки могла видеть экран пользователей в режиме реального времени. LivePerson достигает этого, передавая HTML CSS и Изображения через их собственный сервер и «переигрывая» его для службы поддержки. Однако, когда я делаю это, ни один из стилей не появляется, изображения и html в порядке.

Любые уточняющие рассуждения о том, где находится мой css, будут наиболее оценены

Спасибо

Answer 1

Я столкнулся с подобной проблемой и нашел это; надеюсь, это поможет.

В производстве мы используем API CSSOM для вставки стилей, которые по-разному представлены в инструментах разработчика и могут быть прочитаны путем доступа к свойству .sheet.cssRules в таблице стилей. Узел DOM.

Найдено здесь . Таким образом, ваши стилевые компоненты работают так, как должны работать в производственном процессе с «пустым» тегом стиля. Он просто выглядит пустым из-за способа его внедрения, но на самом деле содержит ваш css (поэтому удаление его удаляет ваш стиль).

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

global.SC_DISABLE_SPEEDY = true

, в результате чего некоторые пользователи видят, что их стиль-компонент css заполняется в соответствующем теге стиля. Подробнее об этом здесь .

Надеюсь, это ответит на ваш вопрос.