Включите стиль css и нормализуйте файлы css в правильном порядке

Обновлено: 21.11.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 г.

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 г.

Подскажите, как решить проблему с плагином извлечения текста?

Здравствуйте. Я посмотрел ваш репозиторий, и кажется, вы импортируете их в файл 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 воспроизвести проблему? Тогда я смогу расследовать это дело.

Читайте также: