Включите стиль css и нормализуйте файлы css в правильном порядке
Обновлено: 07.07.2024
где файл bootstrap.css должен быть загружен до ./myfile.css .
Есть ли способ правильно установить порядок разрешения CSS в веб-пакете для CSS?
Текст был успешно обновлен, но возникли следующие ошибки:
прокомментировал gunta 28 марта 2014 г.
В моем случае этого не происходит, по какой причине?
Один из файлов является компонентом Bower, другой находится в локальном каталоге.
Но они компилируются в следующем порядке:
прокомментировал sokra 28 марта 2014 г.
Порядок в пакете не совпадает с порядком добавления в DOM.
Порядок в комплекте зависит от идентификатора модуля. И идентификатор модуля зависит от того, как часто используется идентификатор и в алфавитном порядке. Или случайно в режиме разработки.
прокомментировал gunta 28 марта 2014 г.
Понятно.
В моем случае порядок DOM также противоположен, есть подсказка?
прокомментировал sokra 28 марта 2014 г.
прокомментировал gunta 28 марта 2014 г.
Странно, установка точек останова показывает, что они загружаются в правильном порядке.
Можно ли указать CSS как зависимость от другого CSS?
прокомментировал sokra 8 мая 2014 г.
закрытие, потому что оно устарело
crittelmeyer прокомментировал 21 мая 2015 г.
прокомментировал luisrudge 9 июня 2015 г.
Это все еще происходит. Каков обходной путь?
прокомментировал sokra 9 июня 2015 г.
@luisrudge Проверьте, установлена ли у вас последняя версия webpack, Extract-Text-Webpack-plugin и css-loader. Этого не должно быть.
прокомментировал luisrudge 9 июня 2015 г.
У меня было, но это все еще происходит.
прокомментировал raypatterson 12 июня 2015 г.
Я наблюдал эту проблему, используя как устаревшие, так и (на момент написания) самые современные веб-пакеты и загрузчики. Однако это происходит только при восстановлении.
Например, это работает так, как ожидалось:
Но если я закомментирую вторую строку, сохраните, дождитесь перестроения, раскомментируйте, сохраните, дождитесь перестроения, порядок содержимого файла в выводе будет обратным.
Я разбиваю код с помощью плагина CommonChunksPlugin, но не изучал, имеет ли это значение.
прокомментировал raypatterson 13 июня 2015 г.
Мой обходной путь заключается в том, чтобы иметь точку входа для каждого "модуля", который имеет зависимости SASS.
jcreamer898 прокомментировал 18 июня 2015 г.
Я вижу очень похожую проблему. Собираюсь попробовать взлом входа, который пытается использовать и @raypatterson.
прокомментировал timashew 24 июня 2015 г.
Эта проблема возникает только при использовании плагина extract-text-webpack-plugin.
Если я выключу его, порядок будет правильным
прокомментировал sokra 24 июня 2015 г.
@timaschew Пробовали ли вы последние версии плагинов css-loader extract-text-webpack-plugin и webpack? Они должны иметь правильный порядок css.
прокомментировал timashew 24 июня 2015 г.
Сейчас я обновил css-loader 0.14.5 до 0.15.1, плагин извлечения обновлен до версии 0.8.2,
но, к сожалению, он по-прежнему не работает.
Это normalize.css, который находится почти в конце файла css.
Я использовал несколько console.logs, прежде чем запрашивать стили, и в консоли браузера журналы расположены в правильном порядке
прокомментировал timashew 24 июня 2015 г.
прокомментировал timashew 25 июня 2015 г.
Я начал отлаживать проблему,
Итак, прежде всего, извлеченные фрагменты имеют неправильный порядок с самого начала.
Но есть функция getOrder, которая сравнивает свойство index2.
Затем я распечатал оба сравниваемых элемента
Итак, функция порядка работает, но почему значения для index2 имеют неправильный порядок?
Итак, я обнаружил, что в webpack есть два места, где установлена эта переменная
Если я добавлю несколько логов между этими строками и скомбинирую некоторые другие из css-loader и Extract-Plugin, я получу следующее:
На данный момент это слишком сложно для меня ^^
Я не понимаю, как и почему устанавливается index2 и почему для нормализации он вызывается два раза.
кстати: я попробовал это с новой версией веб-пакета: 1.9.12
комментарий minhtranite прокомментирован 12 июля 2015 г.
Все еще происходит с webpack 1.10.1 , css-loader 0.15.2 , extract-text-webpack-plugin 0.8.2 .
прокомментировал jackmoore 13 июля 2015 г.
Та же проблема, что и у @timaschew и @vn38minhtran
Прокомментировал Coobaha 30 июля 2015 г.
прокомментировал luisrudge 4 августа 2015 г.
есть какие-нибудь мысли по этому поводу?
прокомментировал jackmoore 6 августа 2015 г.
@luisrudge @Coobaha Я только что увеличил установленную версию webpack до 1.11.0, а css-loader до 0.15.6, и начал получать правильный порядок импорта, так что это может быть исправлено.
прокомментировал luisrudge 6 августа 2015 г.
прокомментировал luisrudge 6 августа 2015 г.
У меня все еще не работает :(
прокомментировал luisrudge 6 августа 2015 г.
vohaha прокомментировал 7 октября 2018 г.
@x-yuri извините, какое решение я пропустил?
x-yuri прокомментировал 7 октября 2018 г. •
@vladimir-kondratenko Проблема в том, что проблемы вроде бы нет. Не могли бы вы помочь нам с его воспроизведением? Вы не видите способа повлиять на порядок файлов CSS? Или у вас есть лучшее представление о том, как это должно работать?
egemon прокомментировал 19 октября 2018 г.
@x-yuri Мне тоже, наверное, не хватает того же, что и @vladimir-kondratenko . Я отключил ExtractTextWebpackPlugin, и теперь порядок правильный, но с этим плагином порядок неправильный. Я использую wepack v3. Не могли бы вы рассказать мне, как решить проблему с плагином извлечения текста?
x-yuri прокомментировал 19 октября 2018 г. •
Подскажите, как решить проблему с плагином извлечения текста?
@egemon Конечно, если вы дадите мне способ воспроизвести это (репозиторий или архив с файлами, необходимыми для воспроизведения проблемы).
прокомментировал thomashibbard 23 октября 2018 г. •
Это безумие, это все еще актуально. Также:
А идентификатор модуля зависит от того, как часто используется идентификатор и в алфавитном порядке. Или случайно в режиме разработки.
Хотя это и кажется правдой, очень непонятно, почему это так. Что хорошего в среде разработки, если она даже не пытается эмулировать рабочую среду? И что еще хуже, вам нужно найти комментарий четырехлетней давности, чтобы узнать об этом.
x-yuri прокомментировал 24 октября 2018 г.
@thomashibbard Я признаю, что веб-пакет - это не простая часть программного обеспечения, но я бы сказал, что порядок более или менее очевиден или ожидаем, если вы имеете представление о том, как работает веб-пакет. С первой страницы документации:
Когда webpack обрабатывает ваше приложение, он строит граф зависимостей, который сопоставляет все модули, необходимые вашему проекту, и создает один или несколько пакетов.
Вы никаким образом не сообщаете Weback о порядке, поэтому граф зависимостей в основном определяет порядок.
Что хорошего в среде разработки, если она даже не пытается имитировать рабочую среду?
Порядок не должен меняться от одной среды к другой. Можете ли вы помочь воспроизвести его?
Кроме того, если вам не нравится его представление о порядке, то каково ваше? Как бы вы хотели, чтобы это работало?
davisriska прокомментировала 8 февраля 2019 г.
Подскажите, как решить проблему с плагином извлечения текста?
@egemon Конечно, если вы дадите мне способ воспроизвести это (репозиторий или архив с файлами, необходимыми для воспроизведения проблемы).
Здравствуйте. Я посмотрел ваш репозиторий, и кажется, вы импортируете их в файл js. Я не уверен, что это работает для вас, но для меня это так -
У меня есть файл app.scss с -
@import '~bootstrap/scss/bootstrap'; @import "~bootstrap-social/bootstrap-social.css";
Похоже, что bootstrap добавляется после bootstrap-social. Может быть, это поможет вам разобраться? Я использую laravel-mix. Я понимаю, что это добавляет еще один элемент в уравнение, но, поскольку я мало знаю о работе веб-пакета, я использую это, чтобы упростить его.
alexander-akait прокомментировал 8 февраля 2019 г. •
Основная проблема с порядком css - css не является детерминированным. Пример:
A.js:
Когда мы извлекаем css, кто должен быть первым?
Прокомментировал CoolGoose 8 февраля 2019 г.
@evilebottnawi, с моей точки зрения, было бы здорово иметь флаг, чтобы устранить эту ошибку и установить одинаковый порядок везде, поскольку, если в этих файлах есть какой-либо общий css, A и B будут иметь разные выходные данные
alexander-akait прокомментировал 8 февраля 2019 г.
@CoolGoose мы уже сделали предупреждение в плагине mini-css-extract-plugin, у вас есть другой случай, когда у вас неверный порядок и нет предупреждений?
x-yuri прокомментировал 8 февраля 2019 г. •
@evillebottnawi Я бы не назвал это недетерминированным. Я считаю, что недетерминированный - это когда выход изменяется, а ввод - нет. Однако в примере мы имеем противоречивые требования.
Я так понимаю, результирующий порядок определяется первым разом, когда файл потребовался. И выдается предупреждение, когда файлы css требуются в разном порядке. Что значит. дело закрыто, нет? :)
Я хотел бы проверить последний предложенный случай, но вряд ли мы узнаем что-то новое.
alexander-akait прокомментировал 8 февраля 2019 г.
@x-yuri у нас могут быть более сложные случаи, поэтому для этого нужен хороший алгоритм, возможно, с опциями о предпочтениях и управлении (это должно быть реализовано в mini-css-wepback-plugin ) и в следующей итерации объединение со стилем- загрузчик и css-загрузчик и при перемещении поддержка css из коробки в webpack
прокомментировал gabsprates 11 декабря 2019 г.
Не знаю, может ли это быть важным моментом, но: граф зависимостей веб-пакета создается синхронно или асинхронно?
x-yuri прокомментировал 11 января 2020 г. •
На дворе 2020 год, а люди (например, @Abhi0725) до сих пор задают такие вопросы? Вместо того, чтобы прилагать усилия. Например, сообщить о своем конкретном случае и рассказать, что он / она ожидает от веб-пакета (точно). Или внимательно прочитайте вопрос, чтобы увидеть, что (скорее всего) веб-пакет работает так, как ожидалось.
@evilebottnawi Итак, вы считаете, что все еще есть случаи, когда поведение веб-пакета неоптимально, и вы оставляете этот вопрос открытым для того, чтобы люди сообщали об этих случаях? Или оставить выпуск, чтобы не забыть улучшить алгоритм? Интересно, на что могут быть похожи эти улучшения?
x-yuri прокомментировал 18 января 2020 г.
@x-yuri Я попытаюсь прояснить, что, по моему мнению, испытывают другие люди и что я сам, в связи с тем, как я должен ожидать поведения веб-пакета в этом сценарии.
Дано. следующий код в корневом App.js моего приложения для реагирования:
Я должен ожидать, что правила из layout.scss будут включены в мой пакет после правил из семантики. Это не тот случай. Однако, когда я меняю код на это:
(обратите внимание на 'z' перед макетом) правила в моем файле макета отображаются после правил из семантики.
Это не то, как я лично должен был ожидать от веб-пакета. Я должен ожидать, что пакет будет отражать порядок, в котором файлы были необходимы/импортированы, а не включать их в алфавитном порядке. Надеюсь, это поможет прояснить ситуацию.
@alexanderharwood (надеюсь, я правильно угадал имя пользователя) Описываемое вами поведение некорректно. Не могли бы вы создать тестовый репозиторий, чтобы я мог git clone && npm i && webpack воспроизвести проблему? Тогда я смогу расследовать это дело.
Читайте также: