Почему игнорируется display:flex после билда?
Использую css модули в связке с next13
Написаны такие стили:
display: flex; position: absolute; width: 22.42vw; height: 15.08vw; top: 0; left: 0; background-image: url(https://i.imgur.com/XxICmmo.png); background-size: contain; background-repeat: no-repeat; flex-direction: column; justify-content: flex-end; padding-left: 25px; padding-bottom: 25px; |
Однако, после сборки (build) и запуска (start) - как такового правила display: flex - нет
При этом, в режиме разработки (dev) - стиль есть
С чем может быть связано?
Дополнительно:
Покажите полный код
.header { margin-top: 100px; & .coursesSlider { display: none; } & .wrapper { display: flex; gap: 2vw; position: relative; } & .headerBlockLeft { width: 44.33vw; height: 27.58vw; position: relative; background-image: url(/main/link-ret.png); background-repeat: no-repeat; background-size: contain; display: flex; align-items: flex-end; & .LeftTop { display: flex; position: absolute; width: 22.42vw; height: 15.08vw; top: 0; left: 0; background-image: url(https://i.imgur.com/XxICmmo.png); background-size: contain; background-repeat: no-repeat; flex-direction: column; justify-content: flex-end; padding-left: 25px; padding-bottom: 25px; & .LeftTopSpan { margin-top: 25px; color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: 16px; /* 100% */ } & .LeftTopLanguages { margin-top: 20px; display: flex; gap: 5px; & .LeftTopLanguage { border-radius: 30px; border: 1px solid #FFF; padding: 7px 23px 7px 23px; color: #FFF; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; /* 133.333% */ } } } & .LeftBottom { height: 11.42vw; width: 100%; display: flex; align-items: center; padding-left: 3.08vw; position: relative; & .LeftBottomSvg { position: absolute; left: 25px; top: 25px; } & .LeftBottomTitle { color: #FFF; font-size: 48px; font-style: normal; font-weight: 400; & .LeftBottomTitleSpan { font-size: 16px; } } } } & .headerBlockRight { width: calc(100% - 44.33vw - 2vw); height: 27.58vw; background-image: url(/main/header-right.webp); background-size: contain; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding-right: 35px; padding-bottom: 28px; gap: 65px; & .BlockRightButtons { display: flex; flex-direction: column; gap: 5px; & .BlockRightButtonsButton { background-color: transparent; border-radius: 30px; border: 1px solid #FFF; padding: 10px 23px 10px 23px; color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: 16px; /* 100% */ } } } @media screen and (max-width: 700px) { & .headerBlockLeft, & .headerBlockRight { display: none !important; } & .coursesSlider { display: block; height: 100%; padding: 0 20px; & .swiper-wrapper { } & .swiper-slide { width: 89.75vw !important; } } } } .main { min-height: 101vh; margin-top: 9.58vw; & .professional-level { margin-top: 90px; } } |
> "Почему игнорируется display:flex"
> *прилагаются скриншоты*
< "Ещё не хватало разгадывать ваши ребусы. "
< "display: flex вообще использовать не надо", "после него много ошибок"..
<
ага.. окей..
что за бред вы пишите?
Бред это вот это:
display: flex вообще использовать не надо, это неофициальный display, у него и после него много ошибок выходит.
просто зашкаливающий
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с игнорированием display:flex после билда может возникать по нескольким причинам. Вот несколько возможных решений, которые могут помочь вам исправить эту проблему:
1. Проверьте правильность написания свойства display:flex в вашем CSS файле. Убедитесь, что вы правильно указали это свойство для нужного элемента и что нет опечаток или других ошибок в написании.
2. Убедитесь, что ваш CSS файл подключен правильно к вашему HTML файлу. Проверьте пути к файлам и убедитесь, что стили корректно загружаются после билда.
3. Проверьте, нет ли других стилей, которые могут переопределять ваше свойство display:flex. Иногда другие CSS правила могут применяться после билда и перекрывать ваше свойство.
4. Убедитесь, что ваш билд проходит без ошибок и что файлы не загружаются неправильно или не полностью. Возможно, что после билда что-то идет не так с загрузкой стилей или скриптов.
5. Используйте инструменты разработчика в браузере, чтобы проверить, какие стили применяются к вашему элементу после билда. Это поможет выявить возможные ошибки или переопределения стилей.
Если после всех этих действий проблема с игнорированием display:flex все еще не решена, попробуйте создать минимальный пример кода (codepen, jsfiddle и т. д.), чтобы другие разработчики могли помочь вам найти решение проблемы более точно.